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>
            <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);
    }
}