Question

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

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

在加载用户明智的待办事项时，我根据他们的todo_ids进行了检查。问题是，当我删除待办事项时，更新用户待办事项时不会同步！

https://jsfiddle.net/Fawel/1ej8tomn/

您将看到在选定的属性值是：selected：[1,2,8] 但是在待办事项列表中，我没有ID为8的任何值。当我保存控制台时，还要打印所有带有8的检查项！而且，如果我保存了此代码，我将被保存带有ID 8的额外待办事项！单击“保存”按钮时如何同步和最终值。我想要的是，当我单击saveorupdate按钮时，我必须具有存在的ID列表。

Answer 1

创建一个计算方法以获取待办事项列表中的现有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
    }
}

Answer 2

那应该返回您正在等待的地方

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

在Vue.js的复选框中获取最终/同步选定的结果

2 个答案: