Vue JS - 如何根据点击事件有条件地显示文本

Question

我刚开始学习 Vue，因为我想从 PHP 转到 Javascript。

我有一个无法解决的问题，希望您能帮助我。

我有一个任务列表。如果我完成了任务，我想更新状态。如果我单击“设置为完整”链接，任务将从未完成的任务移动到已完成任务的列表中。

您可以在屏幕截图中看到，买牛奶在已完成的任务中。我想要做的是在 “买牛奶” 旁边添加 “已完成” 文本或检查图标> 在所有任务列表中。

这是我的代码：

< script >
  var app = new Vue({
    el: '#root',
    data: {
      message: 'Hello world!',
      tasks: [{
          description: 'Go to the store',
          completed: false
        },
        {
          description: 'Buy milk',
          completed: false
        },
        {
          description: 'Feed the dog',
          completed: false
        },
        {
          description: 'Cook something',
          completed: false
        }
      ]
    },
    methods: {
      setToCompleted() {
        this.completed = true;
      },

    },
    computed: {
      incompleteTasks() {
        return this.tasks.filter(task => !task.completed);
      },
      completedTasks() {
        return this.tasks.filter(task => task.completed);
      }

    }
  }); <
/script>

<div id="root">
  <h3>All tasks</h3>
  <ul>
    <li v-for="task in tasks" v-text="task.description == true ? 'Completed' : 'Not completed'"></li>
  </ul>

  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">{{ task.description }}&nbsp|&nbsp<a href="#" @click="task.completed = true">Set as completed</a></li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks" v-text="task.description"></li>
  </ul>
</div>

我尝试过的是我在 v-text 指令上添加了一个条件。但它总是显示未完成。你能指导我为什么它没有改变吗？非常感谢您的帮助。

谢谢。

编辑======

这段代码解决了我的问题：感谢@tomrlh

<div id="root">
  <h3>All tasks</h3>
  <li v-for="task in tasks">
    {{ task.description }} {{ task.completed ? 'completed' : '' }}
  </li>
  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">{{ task.description }}&nbsp|&nbsp<a href="#" @click="task.completed = true">Set as completed</a></li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks" v-text="task.description"></li>
  </ul>
</div>

Answer 1

如何在您的所有任务展览中检查任务是否已完成，然后有条件地显示“已完成”消息：

<h3>All tasks</h3>
<li v-for="task in tasks">
    {{ task.description }} {{ task.completed ? ' | completed' }}
</li>