                        课程
                    
                        /前端开发
                        
                            /前端工具
                        
                        /Vue+Webpack打造todo应用

标签切换不生效

为何tabs.vue内的@click事件都生效呢？

<span

v-for="state in states"

:key="state"

:class="[state, filter === state ? 'actived' : '']"

@click="toggleFilter(state)"

</span>

慕慕6102385

2019-04-02

源自：Vue+Webpack打造todo应用 3-4

关注问题我要回答

956

操作

收起

1 回答

鼬先生
2019-08-16

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