javascript - vue如何删除数组中的单个数据
本文介绍了javascript - vue如何删除数组中的单个数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我做了一个todolist的demo.
模板中用v-for列出todos中的数据.
<ol>
<li v-for="todo in todos" @click="delete">
{{todo.label}}
</li>
</ol>
数据结构是这个样子:
data: {
todos: [
{label: 'walking'},
{label: 'talking'},
]
}
页面是这个样子
我想要当我点击一个todo的时候, 就在todos数据中删除对应的数据. 比如我点击walking, 那么todos中就只剩下talking, 页面自然就更新了. 但是一直找不到合适的方法. 求指导.
解决方案
如果是vue1.0这样写:
<ol>
<li v-for="todo in todos" @click="delete($index)">
{{todo.label}}
</li>
</ol>
然后:
methods:{
delete:function(index){
this.todos.splice(index,1);
}
}
如果是vue2.0这样写:
<ol>
<li v-for="(todo,index) in todos" @click="delete(index)">
{{todo.label}}
</li>
</ol>
然后
methods:{
delete:function(index){
this.todos.splice(index,1);
}
}
这篇关于javascript - vue如何删除数组中的单个数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文