Vue Check boxes from/to array

by Christopher O

HTML

<div id="app">
  <div>
    <label>Email</label>
    <input type="text" v-model="user.email" />
  </div>
  <div v-for="role in roles" :key="role.id">
    <label>{{role.name}}</label>
    <input type="checkbox" v-model="user.roles" :value="role"/>
  </div>
  
  <p>User's selected roles</p>
  {{user.roles}}
  
  <hr>
  
  <div v-for="role in roles2" :key="role">
    <label>{{role}}</label>
    <input type="checkbox" v-model="user.roles2" :value="role"/>
  </div>
  
  <p>User's selected roles2</p>
  {{user.roles2}}
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#app',
  data: {
    user: {
      email: '[email protected]',
      roles: [{id: 1, name: 'Client'}],
      roles2: ['Client'],
    },
    roles: [
      {
        id: 1,
        name: 'Client',
      },
      {
        id: 2,
        name: 'Admin',
      },
      {
        id: 3,
        name: 'Guest',
      }
    ],
    
    roles2: ['Client','Admin','Guest']
    
  }
})