Vuejs : v-model with multiple checkbox in v-for

Question

I have some questions about using v-model with "complex" object. Here's my code:

<v-list v-for="(facet, facetName) in getFacets" :key="facetName">
 <v-list-tile-content v-for='valueFacet in facet" :key="valueFacet.key">
  <v-checkbox v-model="selectedFacets[facetName]" :value="valueFacet.key"></v-checkbox>
 </v-list-tile-content>
</v-list>

And here's my data / init:

data() {
 return {
  selectedFacets: {}
 }
},
created: function() {
 // I initialize my object with all my facets here
 config.facets.forEarch(facet => {
  this.selectedFacets[facet] = [];
 });
}

Some explanation: each facet has multiple checkbox representing values. We can select multiple values. My object has to be like this :

selectedFacets: { facet1 : [value1, value2], facet2: [value12, value 13]

With this code, each time I select one value, it will remove the previous one.

I tried to initalize my object in my data like this without using created function:

data() {
 return {
  selectedFacets: { "facetName" : [], "facetName2" : []}
 }
}

and it works fine. All my values for each facet are added in the right array. But I need to initialize my object and facet names with my conf and if I don't initialize my object in my data, it does not work. I tried with computed / created, by getting my object from my store, but it keeps adding value by removing the previous one.

Any idea about what I do wrong ? Thanks.

I've asked a similar question some time ago and you might find this useful: stackoverflow.com/questions/49582035/… — dziraf
– dziraf, Commented Jul 30, 2018 at 10:29

Max Sinev · Accepted Answer · 2020-05-04 22:31:54Z

3

Just initialize your object with Vue.set:

created: function() {
   config.facets.forEach(facet => {
     Vue.set(this.selectedFacets, facet, []);
   });
}

When component initializes template it doesn't know about selectedFacets[facetName] so to make it reactive and correct working with v-model you should use Vue.set mutator.

edited May 4, 2020 at 22:31

answered Jul 30, 2018 at 11:13

Max Sinev

6,0192 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aurelien H. Over a year ago

Thanks ! I use this.$set instead of Vue.set but otherwise it works fine.

Collectives™ on Stack Overflow

Vuejs : v-model with multiple checkbox in v-for

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related