将对象绑定到Vuejs中的复选框值

Question

So normal checkboxes in vuejs allows you to bind a model to it. When this model has the values from checkboxes pre filled, those particular checkboxes appear checked.

<tr v-for="user in users">
  <td>{{ user.name }}</td>
  <td>
    <input type="checkbox" v-model="selectedUsers" v-bind:value="{ id: user.id }">
  </td>
  <td>
    <input type="checkbox" v-model="selectedUsers" value="{{ user.id }}">
  </td>
</tr>

However you don't get the same behaviour when you bind the checkbox value to an object.

Following is the snippet:

 new Vue({ el: '#app', data: { users: [{ "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com" }, { "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com" }, { "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com" }, { "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com" }, { "id": "5", "name": "Brendon Rogahn", "email": "verlie.buckridge@yahoo.com" }], selectedUsers: [{ "id": "1" }, "1"] } }) 

 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <h4>User</h4> <div> <table> <tr> <th>Name</th> <th></th> <th></th> </tr> <tr v-for="user in users"> <td>{{ user.name }}</td> <td> <input type="checkbox" v-model="selectedUsers" v-bind:value="{ id: user.id }"> </td> <td> <input type="checkbox" v-model="selectedUsers" value="{{ user.id }}"> </td> </tr> </table> </div> <span>Selected Ids: {{ selectedUsers | json }}</span> </div> 

Answer 1

I have done it the following way, please suggest better ways, if any:

 new Vue({ el: '#app', data: { users: [{ "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com" }, { "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com" }, { "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com" }, { "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com" }, { "id": "5", "name": "Brendon Rogahn", "email": "verlie.buckridge@yahoo.com" }], previousUsers: [{ "id": "2" }, { "id": "5" }, "1", "5"], updatedUsers: [] }, methods: { check: function(user_id) { var checked = false; for (i = 0; i < this.previousUsers.length; i++) { if (this.previousUsers[i].id == user_id) { this.previousUsers.splice(i, 1) return true } return false; } } } }) 

 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <h4>User</h4> <div> <table> <tr> <th>Name</th> <th></th> <th></th> </tr> <tr v-for="user in users"> <td>{{ user.name }}</td> <td> <input type="checkbox" v-model="updatedUsers" v-bind:value="{ id: user.id }" checked="{{check(user.id)}}"> </td> <td> <input type="checkbox" v-model="updatedUsers" value="{{ user.id }}"> </td> </tr> </table> </div> <span>Selected Ids: {{ updatedUsers | json }}</span> </div>