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

在All Tasks展览中检查任务是否完成，然后有条件地显示“已完成”消息：

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