Vue在标记任务之间切换不起作用

Question

我再次问这个问题是因为我不明白我做错了什么。这是我做的一个教程，我完全按照教程做了。我正在尝试在标记为已完成和未完成的任务之间切换。当我运行代码时，它不会切换并且没有错误。我阅读了文档，但我并不完全理解。我是编程新手。

 let bus = new Vue();

    let Task = {
       props: ['task'],
     template: `
    <div class="task" :class="{ 'task--done' : task.done , 'task-notdone' : task.done === false }">


      {{ task.body }}
      <a href="#" v-on:click.prevent="toggleDone(task.id)">Mark me as {{ task.done ? 'not done' : 'done' }}</a>

    </div>
    `,

    methods: {
      toggleDone(taskId) {
        bus.$emit('task:toggleDone', taskId);
       }
    }

    };

    let Tasks = {
       components:{
         'task': Task
       },

       data() {
    return {
      tasks: [
        {id: 1, body: 'Task One', done: false },
        {id: 2, body: 'Task Two', done: true },
        {id: 3, body: 'Task Three', done: true }
      ],
    }
      },

       template: `
  <div>
  <template v-if="tasks.length">
  <task v-for="task in tasks" :key="task.id" :task="task"></task>
  </template>
      <span v-else>No tasks</span>
              <form action="">
                 form
              </form>
         </div>
           `,

      methods: {
    toggleDone(taskId){
      let task = this.tasks.find(function (task) {
        return task.id === taskId;
      });

      console.log(task);
    }
       },

       mounted () {
    bus.$on('task:toggleDone', (taskId) => {
      this.toggleDone(taskId);
    })
     },
    };

    let app = new Vue({
      el:'#app',
      components: {
        'tasks': Tasks,

      },


    });

Answer 1

我不确定为什么教程会引导您使用公共汽车；只是这里不需要。有一个任务列表，它们是 javascript 对象，每个任务对象都被传递给任务组件。由于它是一个 javascript 对象，而不是原始值，因此您可以更新任务组件中的 done 属性。

console.clear()

let Task = {
  props: ['task'],
  template: `
    <div class="task" >
      <span :class="{ 'task--done' : task.done , 'task-notdone' : !task.done}">{{ task.body }}</span>
      <a href="#" v-on:click="task.done = !task.done">Mark me as {{ task.done ? 'not done' : 'done' }}</a>
    </div>
  `
};

let Tasks = {
  components:{
    'task': Task
  },
  data() {
    return {
      tasks: [
        {id: 1, body: 'Task One', done: false },
        {id: 2, body: 'Task Two', done: true },
        {id: 3, body: 'Task Three', done: true }
      ],
    }
  },
  template: `
    <div>
      <template v-if="tasks.length">
        <task v-for="task in tasks" :key="task.id" :task="task"></task>
      </template>
      <span v-else>No tasks</span>
    </div>
  `,
};

let app = new Vue({
  el:'#app',
  components: {
    'tasks': Tasks,
  },
});

.task--done{
  text-decoration: line-through
}

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<div id="app">
  <tasks></tasks>
</div>

此外，如果您不想改变组件中的对象，则可以改为发出一个事件，让父级对其进行改变。

console.clear()

let Task = {
  props: ['task'],
  template: `
    <div class="task" >
      <span :class="{ 'task--done' : task.done , 'task-notdone' : !task.done}">{{ task.body }}</span>
      <a href="#" v-on:click="$emit('toggle-task', task)">Mark me as {{ task.done ? 'not done' : 'done' }}</a>
    </div>
  `
};

let Tasks = {
  components:{
    'task': Task
  },
  data() {
    return {
      tasks: [
        {id: 1, body: 'Task One', done: false },
        {id: 2, body: 'Task Two', done: true },
        {id: 3, body: 'Task Three', done: true }
      ],
    }
  },
  template: `
    <div>
      <template v-if="tasks.length">
        <task v-for="task in tasks" :key="task.id" :task="task" @toggle-task="toggleTask"></task>
      </template>
      <span v-else>No tasks</span>
    </div>
  `,
  methods:{
    toggleTask(task){
      task.done = !task.done
    }
  }
};

let app = new Vue({
  el:'#app',
  components: {
    'tasks': Tasks,
  },
});

.task--done{
  text-decoration: line-through
}

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<div id="app">
  <tasks></tasks>
</div>