0
使用vue.js我想建立一个简单的任务管理器。模型和计算属性相互作用Vue.js
当用户点击“完成”复选框，我想两件事情：
- 如果“显示所有任务”未选中，隐藏任务。
- 发送Ajax请求到服务器以任务标记为已完成/开放。
的无能部分如下所示：
<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组件吗？