javascript - Vue.js 中的模型和计算属性交互

Question

我正在尝试使用 vue.js 构建一个简单的任务管理器。

当用户单击“完成”复选框时，我希望发生两件事:

1. 如果未选中“显示所有任务”，则隐藏该任务。
2. 向服务器发送 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 的哪些组件来解决这个问题吗？

Answer 1

如果你分离逻辑，你可以简化很多:

1. 循环显示每个任务(已完成或未完成)(不考虑 show_all)
2. 使用 v-on:click="updateStatus(row)"更新任务
3. 在每个 tr 上，添加 v-show="show_all || !row.status.complete"