【发布时间】：2018-01-17 02:07:24
【问题描述】：
使用 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函数。
如果未选中显示全部复选框，则可见任务将触发并且updateStatus 的逻辑将失败，因为该行将被隐藏并且发送到服务器的 ID 将被关闭。如果在调用updateStatus 之前隐藏了行，则将错误的行传递给updateStatus 函数。
我可以通过在updateStatus 函数的末尾添加过滤器更新来解决这个问题，但这似乎没有利用 Vue.js 库。有人可以帮我解决这个问题的 Vue 组件吗？
【问题讨论】：
标签： javascript vue.js