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>

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

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

请告知。

由于

Answer 1

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

＆＃13;

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()
  }
})

＆＃13;

<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>

＆＃13;

它最初不起作用的原因是因为Vue cannot detect属性在该对象已添加到Vue后动态添加到对象。另一种处理方法是使用$set方法添加属性（而不是像示例中那样使用Object.assign）。

将功能复选框添加到Vue

1 个答案: