javascript - 在 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"的绑定(bind)不起作用。读起来似乎这是因为任何要绑定(bind)到表单控件的属性都需要在声明对象时预先定义。但是我该如何在从服务器返回的 N 个对象的动态列表上执行此操作呢？

请指教。

谢谢

Answer 1

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

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 cannot detect在将对象添加到 Vue 后，将动态添加到该对象的属性。处理此问题的另一种方法是使用 $set方法来添加属性(而不是像我在示例中所做的那样)。