delete方法删除vue中的所有值
delete方法删除vue中的所有值
提问于 2020-11-24 16:02:58
我想要做的是只删除被点击的项目
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
},问题是，当我删除一个项目时，它会删除所有项目
Stack Overflow用户
发布于 2020-11-24 16:14:22
在v中，你将单个元素命名为与数组相同的名称，这可能是问题所在。试试这个：
<ul class="list-group">
<todo v-for="(t,i) in todo" :key="i" :todoString="t.todoString" :completed="t.completed"
@on-delete="del(t)" />
</ul>在您的filter函数中也有一个问题，您没有返回任何内容。这应该是可行的：
del(deltodo) {
this.todo = this.todo.filter(todos => {
console.log(this.todo.length);
return todos.todoString !== deltodo.todoString;
});
console.log(this.todo.length)
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64982383
复制相关文章
相似问题
腾讯云开发者
