vue如何删除数组中的单个数据

Question

我做了一个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, 页面自然就更新了. 但是一直找不到合适的方法. 求指导.

Answer 1

如果是vue1.0这样写：<ol> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;v-for="todo&nbsp;in&nbsp;todos"&nbsp;@click="delete($index)"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{todo.label}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li></ol>然后：methods:{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;delete:function(index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todos.splice(index,1); &nbsp;&nbsp;&nbsp;&nbsp;} }如果是vue2.0这样写：<ol> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;v-for="(todo,index)&nbsp;in&nbsp;todos"&nbsp;@click="delete(index)"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{todo.label}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>&nbsp;&nbsp;</ol>然后methods:{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;delete:function(index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todos.splice(index,1); &nbsp;&nbsp;&nbsp;&nbsp;} }