Bind checkbox to array


Topic: Bind checkbox to array

Rogelio Sanchez asked 6 years ago

How can I bind an array to a group of checkboxes? when I put v-model="myArray" into the checkbox, it says it's expecting string not array, so I had to put three different variables and toggle boolean value through a method on the @change directive, which I don't like, I wish I could put a value in every checkbox and bind it directly to an array. How can I do this, I follow VueJS documentation but it's not working.

Thanks in advance.


Magdalena Dembna staff premium answered 6 years ago

Hi,As I understand, you wish to render several checkboxes which value would be bound to the array stored in data? In the recent release, MDB Vue 5.2.0 we improved mdb-input component in terms of v-model and I encourage you to update your version. The value emitted by checkbox is boolean, not an array. How about this solution:

<template>
    <div>
        <mdb-input v-for="option in options" type="checkbox" :id="option.label" v-model="option.checked" :key="option.id" :label="option.label" >{{option.checked}}
        </mdb-input>
    </div>
</template>
<script>
  import { mdbInput  } from 'mdbvue';
  export default {
    components: {
      mdbInput
    },
    data(){
      return {
        options: [
            {label: '1',  id: 0, checked: false},
            {label: '2',  id: 1, checked: false},
            {label: '3',  id: 2, checked: false}
          ]
      };
    }
  }</script>

Kind regards,Magdalena


Rogelio Sanchez commented 6 years ago

Awesome, thank you very much.


Rogelio Sanchez commented 6 years ago

However, could you tell why this isn't working?

https://vuejs.org/v2/guide/forms.html

the part that says: Multiple checkboxes, bound to the same Array


Magdalena Dembna staff premium commented 6 years ago

Hi, That's not working because our component accepts three data types for it's value: String, Boolean, Number. But thank you for this suggestion - it's definitely something we will add in the future. Kind regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Mac
  • Browser: Google Chrome
  • OS: macOs High Sierra
  • Provided sample code: No
  • Provided link: No
Tags