Vue Js: Creating an array of checkboxes

Question

Vue Js: Creating an array of checkboxes

I have a collection of checkboxes sourced from the main system object where I store all system settings (referred to as getSystem{}).

Within this form, I am retrieving information about a User, who possesses an array of roles []. How can I cross-reference this array of roles with the getSystem.user_roles?

I am familiar with accomplishing this in plain JavaScript. However, how should I approach checkbox input in terms of Vue.js?


    <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 access user.roles to retrieve the array of roles.
    // How do I iterate through the roles and mark the checkbox if it exists within 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 should be placed here to compare with user.roles and mark the checkbox if present??]  > 
    </b-form-group>

javascript vue.js vuejs2

Answer 1

Answer №1

The behavior described can be found in detail on the Checkbox binding documentation.

Below is a simple example that follows a similar logic:

new Vue({
  el: '#app',
  data: {
    user: {
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f286978186b286978186dc919d9f">[email protected]</a>',
      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

The behavior described can be found in detail on the Checkbox binding documentation.

Below is a simple example that follows a similar logic:

new Vue({
  el: '#app',
  data: {
    user: {
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f286978186b286978186dc919d9f">[email protected]</a>',
      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 3

Answer №2

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

Make sure to include the line :true-value="[]".

Answer 4

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

Make sure to include the line :true-value="[]".

Answer 5

Answer №3

Utilizing dynamic checkbox input rendering allows for selecting values based on conditions set within a customized function (in this case, selectUsers). This function is where we can establish the specific conditions that must be met before a value is added to the selected array.

See it in action:

https://i.stack.imgur.com/bQ4bT.gif

This is an example of a complete NuxtJs (Vue) component with placeholder 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){
          //Additional conditions can be checked here before adding to the array.
          if(this.selected.includes(id)){
              this.selected=_.without(this.selected,id)
          }else{
              this.selected.push(id)
          }
      }
  }
}
</script>

Answer 6

Utilizing dynamic checkbox input rendering allows for selecting values based on conditions set within a customized function (in this case, selectUsers). This function is where we can establish the specific conditions that must be met before a value is added to the selected array.

See it in action:

https://i.stack.imgur.com/bQ4bT.gif

This is an example of a complete NuxtJs (Vue) component with placeholder 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){
          //Additional conditions can be checked here before adding to the array.
          if(this.selected.includes(id)){
              this.selected=_.without(this.selected,id)
          }else{
              this.selected.push(id)
          }
      }
  }
}
</script>

Answer 7

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 8

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

Answer №5

When I was server rendering the checkboxes in my situation, what ended up working for me was changing :value to 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

Please take note that this code snippet corresponds to a Laravel Blade Templates.

Answer 10

When I was server rendering the checkboxes in my situation, what ended up working for me was changing :value to 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

Please take note that this code snippet corresponds to a Laravel Blade Templates.

Vue Js: Creating an array of checkboxes

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Check for a rapid return if the function ends up returning null in JavaScript

Transfer the cropped image to the database through AJAX on the client side and PHP on the server side

Accessing data from a live database in a randomized sequence

Guide to utilizing the Array find method to retrieve an object in JavaScript

The ASP.NET MVC controller did not receive the JSON object properly due to some missing properties

I encountered an issue while attempting to connect to my MySQL database using my Express API endpoint: error message "connect ECONNREFUSED 127.0

Analyzing past UTC date times results in a peculiar shift in time zones

Leverage Summernote in conjunction with Vue components to dynamically switch their locations

I used npm to install a package, but for some reason, it's not appearing in

How can we refresh the model in Angular.js from a section of the application that has not been 'angularized' yet?

What could be causing the responsive line chart from nivo to not appear in jsdom while using Jest?

Rotating images with React

What is the best way to show an image on the screen once a submit button is clicked?

React Component: Issue with conditional "if else" statement not refreshing in return statement

Integrate an interactive feature to highlight a column in a table, similar to the active class in Netflix

Reliable Dropdown Navigation Bars

Functionalities of HTML controls

Leveraging Jquery and an API - restricted

The picture is displayed just once, despite the fact that it was supposed to be returned 50 times within the loop

Exploring the use of data attributes in jQuery to access JSON objects