在 Vue 3 中选中和取消选中复选框时，如何执行两种不同的方法？答案

【问题标题】：How to execute two different methods for when a checkbox is checked and unchecked in Vue 3?在 Vue 3 中选中和取消选中复选框时，如何执行两种不同的方法？
【发布时间】：2021-05-14 04:21:27
【问题描述】：

我有一个对数组进行排序的复选框。我希望它在选中时对数组进行排序，并在未选中时恢复到以前的排列。但是，我只知道复选框被选中时如何执行排序方法，而不是未选中时。

这是我的复选框代码

<input type="checkbox" @click="sortNew"> Newest First

这就是方法：

sortNew() {
      this.projects.sort((a,b) => b.id - a.id)
    }

现在，我想在未选中时执行下面的方法：

sortOld() {
      this.projects.sort((a,b) => a.id - b.id)
    }

那么，我该怎么做呢？我正在使用 Vue.js 3.0.0。

【问题讨论】：

创建新方法，您可以在其中检查复选框的值是否选中，基于您可以调用 sortnew 或 sortold。

标签： javascript vue.js vuejs3

【解决方案1】：

您可以使用数据属性，例如sort: true，然后使用单一方法对数组进行排序和取消排序。

所以每当排序为真时，它会对数组进行排序，然后也将排序设置为假，所以每当下次单击按钮时，它都会移动到else部分并取消对数组的排序，然后再次设置排序为真等等。

sortNew() {
    if (this.sort) {
        this.projects.sort((a,b) => b.id - a.id)
        this.sort = false;
    } else {
        this.projects.sort((a,b) => a.id - b.id)
        this.sort = true;
    }
}

【讨论】：

【解决方案2】：

我找到的解决方案是将v-model 和@change 附加到复选框。 @change 执行一个函数来检查 v-model 是真还是假，然后遵循 if-else 语句以达到所需的结果。

最终代码如下所示：

<input type="checkbox" @change="sorter" v-model="sort"> Newest First

methods: {
    sorter() {
       if (this.sort) {
        // some code
      } else {
        // some code
      }
   }
}

【讨论】：

【解决方案3】：

你只需重写代码，

 <input type="checkbox" v-on:click="decideFun($event)">

 decideFun(event) {
    if(event.target.checked){
       sortNew(this);
    }else{
       sortOld(this);}
 }

 sortNew(current) {
   current.projects.sort((a,b) => b.id - a.id)
 }

 sortOld(current) {
   current.projects.sort((a,b) => a.id - b.id)
 }

【讨论】：