问题描述
我刚刚开始学习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 }} | <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 }} | <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>
1楼
tomrlh
1
已采纳
2019-03-03 03:46:20
如何在“ 所有任务”展览中检查任务是否完成，然后有条件地显示“已完成”消息：
<h3>All tasks</h3>
<li v-for="task in tasks">
{{ task.description }} {{ task.completed ? ' | completed' }}
</li>