Checkbox array in Vue Js

Question

I have an array of checkboxes, coming from a main system object where I store all system setting. (called getSystem{}).

In this form, Im accessing a User, which has an array of roles []. How can I check this array of roles, against the getSystem.user_roles?

I know how to do it normally, in javascript obviously. But what would I put in the checkbox input Vue.js wise?

    <b-form-group>
      <label for="company">Email Address</label>
      <b-form-input type="text" id="email" v-model="user.email" placeholder="Enter a valid e-mail"></b-form-input>
    </b-form-group>
    // Here i can do user.roles to get the array of roles.
    // What can I do to loop through the roles and check the box if it exists in the user roles??
    <b-form-group v-for="resource, key in getSystem.user_roles" v-if="getSystem.user_roles">
       <label>{{resource.role_name}}</label>
       <input type="checkbox" [ what do I put here to compare against user.roles, and check the box if exists??]  > 
    </b-form-group>

Answer 1

This behavior is well documented on the Checkbox binding Docs.

Here a little example emulating your logic

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<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 roels</p>
  {{user.roles}}
</div>

Answer 2

We can use dynamic check box input rendering with the condition to select values from the customized function (in my example selectUsers). In that function, we can write conditions that we need to compare before append to the selected array.

Demo:

This is the full NuxtJs(vue) component with dummy data.

<template>
  <v-container fluid>
    <p>{{selected }}</p>
    <div v-for="user in user_roles" :key="user[0]">
    <input type="checkbox"
      @click="()=>{selectUsers(user[0])}"
      :value="user[0]"
    >
    {{user[1]}}
    </div>
  </v-container>
</template>

<script>
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
export default {
    
    data() {
    return {
      user_roles:[[1,"dd"],[2,"ddd"],[3,"kksse"],[4,"kske"]] ,
      selected:[],
    };
  },
  methods: {
      selectUsers(id){
          //in here you can check what ever condition  before append to array.
          if(this.selected.includes(id)){
              this.selected=_.without(this.selected,id)
          }else{
              this.selected.push(id)
          }
      }
  }
}
</script>

Answer 3

<input type="checkbox" v-model="userRoles" :true-value="[]" :value="resource.role_name">

You should add :true-value="[]".