筛选

接下来就是筛选功能,有了之前筛选全部未完成的 todo 的经验,相信实现其它的筛选思路也就非常清晰了,我们这里有三种筛选:

  • 全部:显示全部 todo
  • 进行中:显示未完成的 todo
  • 已完成:显示已完成的 todo

为了增强用户体验,选中的按钮应该高亮显示,我们这里把它标红了。

现在唯一的问题是,我们如何知道应该筛选出哪中类型的 todo 呢?用户是想要进行中的 todo 还是已完成的todo?可以发现用户会点击相应的按钮来表明他的意图。如果我们在用户点击按钮时把他的意图传递给 Vue 对象,Vue 就知道该怎么做了。

因此我们给 data 增加一个属性 intention,来记录用户的意图。我们定义三种意图:

  • all:想查看全部 todo
  • ongoing:想查看未完成的 todo
  • completed:想查看已完成的 todo
var app = new Vue({
        el: '#todo-app',
        data: function () {
            return {
                todos: [],
                newTodoTitle: '',
                editedTodo: null,
                intention: 'all', // 默认为 all
            }
        },
        ...
    })

然后我们需要根据用户的意图从 todos 中筛选 todo,之前说过,从 Vue 已绑定的数据中计算新的结果是计算属性的典型应用场景,所以我们加一个 filteredTodos 计算属性:

computed: {
            leftTodosCount: function () {
                return this.todos.filter(todo => !todo.finished).length
            },
            filteredTodos: function () {
                if (this.intention === 'ongoing') {
                    return this.todos.filter(todo => !todo.finished)
                } else if (this.intention === 'finished') {
                    return this.todos.filter(todo => todo.finished)
                } else {
                    // 其它未定义的意图我们为其返回全部 todos,
                    // 这里面已经包含了 all 意图了
                    return this.todos
                }
            },
        },

当然我们会发现未完成的 todo 分别在 filteredTodosleftTodosCount 两个计算属性中被计算了两次,为了优化一下计算效率,我们可以重构一下代码:

computed: {
            leftTodos: function () {
                return this.todos.filter(todo => !todo.finished)
            },
            leftTodosCount: function () {
                return this.leftTodos.length
            },
            filteredTodos: function () {
                if (this.flag === 'ongoing') {
                    return this.leftTodos
                } else if (this.flag === 'finished') {
                    return this.todos.filter(todo => todo.finished)
                } else {
                    // 其它未定义的意图我们为其返回全部 todos,
                    // 这里面已经包含了 all 意图了
                    return this.todos
                }
            }
        },

filteredTodos 就是我们根据用户意图返回的结果。

打开浏览器,刷新看看效果!发现怎么点击筛选按钮返回的还是全部 todo。好吧,我想你也想到了,我么只是在 vue 中定义了计算属性,但是用户点击按钮并没有把它们的意图传给 Vue 对象。我们来设置一下,让用户的意图在点击按钮时传给 Vue,这样 Vue 才知道如何操作。给各个筛选按钮绑定一个 click 事件。

<div>
    <span>剩余<span style="font-weight: bold;"> {{leftTodosCount}} </span>项未完成 ---</span>
    <span>筛选:
      <input type="button" value="全部"
             class="selected"
             @click="intention='all'"/>
      <input type="button" value="进行中"
             @click="intention='ongoing'"/>
      <input type="button" value="已完成"
             @click="intention='finished'"/>
      <input type="button" value="清除已完成">
      <input type="button" value="清除全部">
    </span>
  </div>

特别注意不要忘了 "intention='all'" all 两边的引号,因为这是一个字符串。

再次打开浏览器看效果,好吧,怎么点还是没反应。忘了刷新?刷新一下,还是没反应!哪里出错了?F12 打开控制台调试,Vue 显示欢迎消息没有任何错误提示!!

尝试着自己找找原因~~

我们之前在循环显示 todo 列表时使用的是 this.todos 的数据,当然你无论如何点击按钮循环的始终都是 todos 的数据。把循环的内容改为 filteredTodos

<li v-for='todo in filteredTodos' :key='todo.id'>
    <span :class="{finished: todo.finished}"
          @dblclick="editTodo(todo)">{{ todo.title }}</span>
    ...
</li>

大功告成!

练习

现在筛选的功能基本完成了,但是有一个地方还没有实现,用户点击相应意图的按钮,对应的按钮应该高亮显示,而现在始终只有全部按钮高亮,因为我们在 html 中为其设置了 class 始终为 selected。尝试修改代码实现需求。(hint:别忘了 Vue 的动态样式绑定。如何判断用户点击了哪个按钮呢?)

-- EOF --

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