将功能复选框添加到 Vue 中的用户列表中

Question

我想这是一个常见的场景，但没有找到任何关于如何在 Vue 中做到这一点的例子。

我正在从 REST 服务中获取用户列表并在表中显示结果。(简化如下(

  <tr v-for="guser in filteredUsers" class="group_user">
      <td><input type="checkbox" v-bind="guser.checked"></td><td>{{guser.username}</td>
   </tr>

现在的问题是，检查的属性不是来自后端数据服务的用户对象上的真实属性。所以我在获取用户列表后将其添加到客户端上。这似乎是正确的方法，因为后端服务不关心用于前端功能的"已检查"。

但是，v-bind="guser.checked"的绑定不起作用。阅读这似乎是因为在声明对象时需要预定义任何将绑定到表单控件的属性。但是，如何在从服务器返回的 N 个对象的动态列表中执行此操作？

请指教。

谢谢

Answer 1

在通过 AJAX 检索用户对象后，将 checked 属性添加到用户对象中。

console.clear()
// simulated data from the server
const users = [
  {id: 1, username: "Bob"},
  {id: 1, username: "Mary"},
]
new Vue({
  el: "#app",
  data:{
    users:[]
  },
  computed:{
    filteredUsers(){
      // simulate filtered users
      return this.users
    }
  },
  methods:{
    getUsers(){
      // simulate an ajax call with setTimeout
      setTimeout(() => {
        // iterate over the user objects retrieve from the server
        // and add a checked property. Assign the result to users
        this.users = users.map(u => Object.assign({}, u, {checked: false}))
      }, 250)
    }
  },
  created(){
    this.getUsers()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="guser in filteredUsers" class="group_user">
      <td><input type="checkbox"v-model="guser.checked"></td>
      <td>{{guser.username}}</td>
    </tr>
  </table>
  {{users}}
</div>

它最初不起作用的原因是 Vue 无法检测到在对象已添加到 Vue 后动态添加到对象的属性。处理此问题的另一种方法是使用 $set 方法来添加属性(而不是像我在示例中所做的那样使用 Object.assign (。