删除todo

有了之前的基础,删除 todo 的功能变得易如反掌,我们只需要监听用户点击删除按钮的事件,绑定一个删除 todo 的方法,将当前需要删除的 todo传给 vue,vue 就知道我们要删除哪个 todo了。

<ul>
    <li v-for='todo in todos' :key='todo.id'>
        ...
        <input type="button" value="删除" @click="removeTodo(todo)">
        ...
    </li>
</ul>
...
<script>
    let id = 0; // 用于 id 生成
    var app = new Vue({
        ...
        methods: {
            ...
            removeTodo: function (todo) {
                this.todos.splice(this.todos.indexOf(todo), 1)
            }
        }
    })
</script>

这里用到两个 JavaScript 数组的相关方法,this.todos.indexOf(todo) 用来定位元素的位置,然后我们删除掉这个位置的元素 splice(index, 1),1 表示只删除一个,即当前位置(index 的值)的元素。

由于 todos 是一个数组,所以我们这里将大量涉及 js 的数组操作,不妨浏览一下 js 数组都有哪些方法可以为我们所用。

练习

练习一:我们现在的删除操作非常粗暴,只要一点击 todo 就彻底消失了。能否温和一点,让用户点击删除时并非真正地删除,而是弹出一个提示框,提示用户确定删除这个 todo 么?用户可以确认也可以取消。

练习二:还有一种温和的删除方式,用户点击删除不会提示,但是删除后会出现一个撤销按钮,允许用户撤销当前的删除操作,点击撤销后之前删除的 todo 又回来了。

更进一步,我们为用户提供一个回收站功能,里面记录用户的全部已删除 todo,用户可以还原删除的 todo。(hint:这个功能等讲到我们实现 todo 的筛选后就知道如何做了,目前不妨先思考一下。)

-- EOF --

最后更新:2019年3月17日 01:25