v

by talkhabi

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
  <div>
    <table>
      <tr>
        <th>Name</th>
        <th>Select All
          <input type="checkbox" v-model="allSelected">
        </th>
      </tr>
      <tr v-for="user in users">
        <td>{{ user.name }}</td>
        <td>
          <input type="checkbox" v-model="userIds" :value="user.id">
        </td>
      </tr>
    </table>
  </div>
  <span>Selected Ids: {{ userIds }}</span>
</div>

JavaScript

// taken from https://jsfiddle.net/okv0rgrk/3747/

new Vue({
  el: '#app',
  data: {
    users: [ 
      { "id": "Shad", "name": "Shad" }, 
      { "id": "Duane", "name": "Duane" }, 
      { "id": "Myah", "name": "Myah" }, 
      { "id": "Kamron", "name": "Kamron" }, 
      { "id": "Brendon", "name": "Brendon" }
    ],
    userIds: []
  },
  computed: {
    allSelected: {
      get() {
        return this.userIds.length === this.users.length
      },
      set(val) { 
        this.userIds = [];
        console.log(val)
        if (val) this.userIds = this.users.map(u => u.id)
      }
    }
  }
})