CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Kylie
Kylie

Reputation: 11759

Checkbox array in Vue Js

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>

Upvotes: 25

Views: 62329

Answers (5)

Adelin
Adelin

Reputation: 19011

In my case, as I am server rendering the checkboxes, what worked for me is to replace :value with just value

@foreach($carOptions as $option)
<div class="form-check">
    <input class="mx-2 form-check-input cursor-pointer"
           type="checkbox"
           value="{{$option}}" <------ HERE in order for vue to work I had to change from :value to value
           v-model="offer.carOptions">
    <label class="custom-control-label cursor-pointer"
           for="leading">{{ __($option) }}</label>
</div>
@endforeach

NOTE: The code snippet is a Laravel Blade Templates.

Upvotes: 1

DobleL
DobleL

Reputation: 3928

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>

Upvotes: 57

&#214;mer Faruk PARLAR
&#214;mer Faruk PARLAR

Reputation: 171

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

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

Upvotes: 17

Kelum Sampath Edirisinghe
Kelum Sampath Edirisinghe

Reputation: 1267

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:

enter image description here

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>

Upvotes: 3

Quoc Quach
Quoc Quach

Reputation: 141

<b-form-group v-for="resource, key in getSystem.user_roles" v-if="getSystem.user_roles" :key="key">
   <label>{{resource.role_name}}</label>
   <input type="checkbox" v-model="userRoles" :value="resource.role_name"  > 
</b-form-group>

<script>
  data(){
    return {
      userRoles: []
    }
  }
</script>

Upvotes: 2

Related Questions