[mdCheckbox] Multiple md-checkbox, bound to the same Array

[jgiovanni]

Is it possible to achieve multiple checkboxes, bound to the same array, like Vue's example currently? Or do we need to use the events? Can't seem to do this.

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

[marcosmoura]

Not right now, but this is a great improvement. I'm going to do it.

[capttrousers]

Or an object, something like

checkedNames {
"John" : false,
"Jim" : true,
"Jill" : false,
"Jack" : true
}

[Okipa]

How would you manage to currently handle the checked checkbox values ?
I tried to use the @change event but in case of a page by page survey (on page for a question), I have to collect the answers and to reload them if we go back on a question page. I am kind of stuck here ...

[jgiovanni]

@Okipa so far, I've managed to find a workaround by manually building the checkboxes like this

<template v-for="(g, $index) in $root.genresList">
  <!-- What we want to use... -->
  <!--<md-checkbox :value="g.id" class="">{{g.name}}</md-checkbox>-->

  <!-- What we have to use... -->
  <div class="md-checkbox md-theme-default" :class="{ 'md-checked': contains('selectedGenres', g.id) }">
    <div class="md-checkbox-container">
      <input :id="'genreCheckA'+$index" type="checkbox" v-model="selectedGenres" :value="g.id">
    </div>
    <label class="md-checkbox-label" :for="'genreCheckA'+$index">{{g.name}}</label>
  </div>
</template>

data(){
  return {
    selectedGenres: [],
  }
},
methods: {
  contains(arr, string){
    return _.contains(this[arr], string);
  },
}

This way it has the functionality of regular vue checkboxes with vuematerial design. If it works for others as it does for me, you can probably wrap it in a vue component for your own customization.

[Okipa]

Nice stuff @giovanniorigins, I will try it soon !

[djayd]

Just wondering if there has been any updates to this issue?

I'm thinking about building the checkboxes myself in the DOM, but didn't want to do all that if it might be fixed soon. Appreciate this entire project!

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.

https://vuematerial.io/components/checkbox