1回答

• 

  鼬先生

  2019-08-16 17:20:41

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

      }

  }

  
  

  0 0