如果你换成ES5就知道了

this.todos.filter(function(todos) {

    return completed === todos.completed

}

data中的todos数组的每一项todo

在item.vue中v-model="todo.completed"，这个是数据得双向绑定

class名是todo-item， todo.completed ? 'completed':''是三目运算符

建议你使用其他格式的图片，jpg,png都可以显示。

父组件把自己的todos列表传给子组件 子组件再自己进行筛选

key值重复，不影响正常运行，如果有强迫症改一下key值

<input
  type="checkbox"
  class="toggle"
  v-model="todo.completed" 
/>

单选框中选中和没有选中的状态 分别为 true和 false
v-model对该item的completed直接进行了双向绑定
在修改单选框选中状态时会直接修改completed的值

true就是完成的啊，false是未完成的

这个 todo 是 filter（）函数中回调的一个参数

写成这样也是可以的

return this.todos.filter(e => !e.completed).length

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

编辑器的问题吧，有红色下划线应该是没有被编辑器检测到存在的变量，在setting中设置一下吧。

tabs中的筛选状态取决于todo里面传过来的filter.你要通过事件总线($emit)将当前的点击的状态发送给父组件todo.vue,再在todo里面通过实践监听来将传过来的state定义为传过去的filter,以改变筛选标签.

tabs.vue:

methods: {

    clearAllCompleted() {

        this.$emit('clearAll');

    },

    toggleFilter(state) {

        this.$emit('toggle', state);

    }

}

todo.vue:

HTML部分:

<Tabs

     :filter="filter"

     :todos="todos"

     @toggle="toggleFilter"

     @clearAll="clearAllCompletedTodo"

   />

script部分:

methods: {

    addTodo(e) {

        this.todos.unshift({

            id: id++,

            content: e.target.value.trim(),

            completed: false

         });

        e.target.value = '';

     },

    deleteTodo(id) {

        this.todos.splice(this.todos.findIndex(todo => id === todo.id), 1);

    },

    toggleFilter(state) {

        this.filter = state;

    },

    clearAllCompletedTodo() {

        this.todos = this.todos.filter(todo=> todo.completed===false);

    }

}

箭头函数

相当于：

function (todo) {
    return completed === todo.completed
}

在data里面声明todos的地方再声明一个 id, unshift 的时候用 this.id++， 报错就要看你在哪里声明的

把todos数组添加数据试试。todos为空，todo.id也没有，可能导致报错。模型创建失败

学习时可以手工一行行地编写webpack配置文件，这样理解深刻，但做正式项目时就没必要了，直接使用vue-cli生成模板项目，高效方便，只要知道怎么调整和定制就够了。

一开始不要参考别人的代码。先自己思考与动手实践，最后在参考别人的。同学您好，我们后续会将源码进行上传，请您及时关注学习，祝您学习成功！

补充一下 this.filter的值由todo.vue 里面的toggleFilter方法所改变

toggleFilter(state) {

this.filter = state

},

状态是对的，实践过了

click不是clcik。。

我也用的event，是可以的，怀疑你在上面调用toggle时没有去掉参数，你可以打印一下stateText

https://www.cnblogs.com/cjx-work/p/8052865.html

clearAllCompleted() {

// 给todos赋一个新的值（即todo.completed为false的值）

this.todos = this.todos.filter(todo => todo.completed === false)}

todo.vue这个组件就是干了这件事,是在控制了当前的数据显示的状态的,所以不会对后续的数据有影响,

我也出现了这个问题，结果是app.vue中#cover的z-index设置错了，导致整个图片盖在了列表上面，所以不会响应hover事件。

你打印的位置放在赋值前面了，那时候值还没改变，把打印放在this,filter = state后面就好了

解决了，写错，判断里面写赋值了=，不是=而是===。