I'm seeking clarification on utilizing v-model with a "complex" object. Here's the code snippet in question:
<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>
Here is the corresponding data / initialization code:
data() {
return {
selectedFacets: {}
}
},
created: function() {
// Initializes the object with all facets
config.facets.forEarch(facet => {
this.selectedFacets[facet] = [];
});
}
To elaborate, each facet contains multiple checkboxes representing values. Multiple values can be selected. The structure of my object should resemble this:
selectedFacets: { facet1 : [value1, value2], facet2: [value12, value 13]
With the current code, selecting a value overwrites the previous one. I attempted initializing the object in the data section like this, and it works:
data() {
return {
selectedFacets: { "facetName" : [], "facetName2" : []}
}
}
However, I need to initialize the object and facet names from my configuration. If I don't do this in the data section, it doesn't function correctly. I tried using computed / created with store data, but it continues to overwrite values instead of adding them.
Any insights on what I might be doing incorrectly? Thank you.