Binding object to checkbox value in 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>