delete方法删除vue中的所有值答案

【问题标题】：delete method delete all the values in vuedelete方法删除vue中的所有值
【发布时间】：2021-03-06 23:49:21
【问题描述】：

我想要做的是我只想删除被点击的项目

todoList 组件：

模板：

<ul class="list-group">
                  <todo v-for="(todo,i) in todo" :key="i" :todoString="todo.todoString" :completed="todo.completed"
                  @on-delete="del(todo)" />
              </ul>

脚本：

 data() {
    return {
      todo: [
        { todoString: "make videos Angular", completed: true },
        { todoString: "make videos React", completed: false },
        { todoString: "make videos Vue", completed: true },
        { todoString: "make videos Javascript", completed: false },
      ],
    };
  },
 
 del(deltodo) {
          this.todo = this.todo.filter(todos => {
            todos.todoString !== deltodo.todoString;
           console.log(this.todo.length)
          });
          console.log(this.todo.length)
        },

TodoComponent：

模板：

<li class="d-flex align-items-center list-group-item">
    <button class="btn border-0 text-left flex-grow-1">{{todoString}}</button>
    <form action="" class="flex-grow-1">
        <input type="text" class="form-control">
    </form>

    <button class="btn btn-outline-primary">Edit</button>
    <button  key="" @click="$emit('on-delete')" class="btn btn-outline-danger">delete</button>

</li>

脚本：

props:{
    todoString:String,
    completed:Boolean
},

问题是当我删除一个项目时，它会删除所有项目

【问题讨论】：

标签： javascript vue.js vue-component vuex

【解决方案1】：

我首先将索引传递给del，而不是整个对象：

@on-delete="del(i)"

那么del将使用splice实现：

del(i) {
  // remove 1 element at index i
  this.todo.splice(i, 1);
}

如果要使用filter，需要从回调中返回：

this.todo = this.todo.filter(todos => {
  return todos.todoString !== deltodo.todoString
});

【讨论】：

【解决方案2】：

在 v-for 中，您已将单个元素命名为与数组相同的名称，这可能是问题所在。试试这个：

<ul class="list-group">
                  <todo v-for="(t,i) in todo" :key="i" :todoString="t.todoString" :completed="t.completed"
                  @on-delete="del(t)" />
              </ul>

您的过滤功能也有问题，您没有返回任何内容。这应该有效：

 del(deltodo) {
          this.todo = this.todo.filter(todos => {
            console.log(this.todo.length);
            return todos.todoString !== deltodo.todoString;
          });
          console.log(this.todo.length)
        },

【讨论】：