使用vue.js，我试图构建一个简单的任务管理器。
当用户单击“完成”复选框时，我希望发生两件事：
如果未选中“显示所有任务”，则隐藏任务。
向服务器发送ajax请求，以将任务标记为已完成/打开。
阳o部位如下所示：
<div id="tasks-app">
<input type="checkbox" id="checkbox" v-model="show_all">
<label for="checkbox">Show all tasks</label><br>
<table class="table">
<tr><th v-for="column in table_columns" v-text="column"></th><tr>
<tr v-for="row in visibleTasks" :class="{danger: !row.daily_task.complete && row.daily_task.delayed, success: row.daily_task.complete}">
<td v-text="row.task.name"></td>
<td v-text="row.task.deadline"></td>
<td v-text="row.daily_task.status"></td>
<td v-text="row.daily_task.task_user"></td>
<td>
<input type="checkbox" v-on:change="updateStatus(row)" v-model="row.daily_task.complete" >Complete</input>
</td>
<td><input v-model="row.daily_task.delay_reason"></input></td>
</table>
</div>
和VUE.js代码：
app = new Vue({
el: '#tasks-app',
data: {
table_columns: ['Task','Deadline','Status','User','Actions','Reason'],
tasks: [],
filter_string: '',
show_all: false
},
computed: {
visibleTasks() {
show_all = this.show_all
if(show_all){
search_filter = this.tasks
}else{
search_filter = _.filter(this.tasks,function(task){
return !task.daily_task.complete;
})
}
return search_filter
}
},
methods: {
updateStatus(row){
var id = row.daily_task.id
var complete = row.daily_task.complete
if(complete){
axios.get('set_task_complete/' + id)
}else{
axios.get('set_task_open/' + id)
}
}
}
})
如果选中了显示全部复选框，则可以按预期工作。数据更改，然后调用
updateStatus函数。但是，如果未选中“显示所有”复选框，则将触发visibleTasks，并且
updateStatus的逻辑将失败，因为该行将被隐藏，发送给服务器的ID将被关闭。如果在调用updateStatus之前隐藏了该行，则会将错误的行传递给updateStatus函数。我可以通过在
updateStatus函数末尾添加一个过滤器更新来解决此问题，但这似乎并没有利用Vue.js库。有人可以帮我解决您使用Vue的哪些组件吗？ 最佳答案
如果您将逻辑分开，则可以简化很多事情：
循环显示每个任务（已完成或未完成）以显示它们（不考虑show_all）
使用v-on:click="updateStatus(row)"更新任务
在每个tr上添加v-show="show_all || !row.status.complete"
关于javascript - Vue.js中的模型和计算属性交互，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45586360/