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: 'test@test.com', 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

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

您应该添加:true-value="[]" 。

Answer 3

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 4

<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>

Answer 5

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.