Vuejs2 在vuejs中的复选框中获取最终/同步选定结果

假设我有一个待办事项应用程序。在另一个表中，我保存userid和todoid，如下所示：

user-----todo_ids
1-------------2,6,5,8
2------------6,8,5,9

加载用户智能todo时，我根据他们的todo\u ID进行检查。问题是，当我删除todo时，它在更新用户todo时不同步

在这里，您将看到，在选定的属性中，值为：selected:[1,2,8] 但在todo列表中，我没有id为8的任何值。当我保存控制台时，也用8选中全部打印！ 如果我保存这个，我将保存额外的id 8，该todo将被删除！ 单击“保存”按钮时，如何获得同步和最终值。

---

我想要的是，当我单击Save或Update按钮时，我必须获得已存在的ID列表。

创建一个计算方法以获取待办事项列表中的现有ID，并使用该方法筛选出所选数组中不存在的值：

...
computed: {
    todoIds: function() {
        return this.todos.map(function(item) {
            return item.id;
        })
    },
    filteredSelected() {
        return this.selected.filter(function(item) {
            return this.todoIds.includes(item);
        })
    }
},
method: {
    saveOrUpdate: function() {
        this.filteredSelected; // This is what you need
    }
}

---

创建一个计算方法以获取待办事项列表中的现有ID，并使用该方法筛选选定数组中不存在的值：

...
computed: {
    todoIds: function() {
        return this.todos.map(function(item) {
            return item.id;
        })
    },
    filteredSelected() {
        return this.selected.filter(function(item) {
            return this.todoIds.includes(item);
        })
    }
},
method: {
    saveOrUpdate: function() {
        this.filteredSelected; // This is what you need
    }
}

---

这就是你等待的回报

saveOrUpdate: function(){
      const vm = this
        console.log(
      this.todos.filter(
        (t)=>{return vm.selected.includes(t.id)}
      ).map((t)=>{return t.id})
      );
    }

---

这就是你等待的回报

saveOrUpdate: function(){
      const vm = this
        console.log(
      this.todos.filter(
        (t)=>{return vm.selected.includes(t.id)}
      ).map((t)=>{return t.id})
      );
    }

---

您的代码正在js fiddle上运行。但当我从api获取数据并将其拆分时，得到的结果如下：`[“4”、“5”、“6”、“10”、“1”，ob:Observer]`然后过滤后的结果返回null@您的代码正在js fiddle上运行。但当我从api获取数据并将其拆分时，得到的结果如下：`[“4”、“5”、“6”、“10”、“1”，ob:Observer]`然后过滤后的结果返回null@格言