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

Question

我有一些关于将 v-model 与“复杂”对象一起使用的问题。这是我的代码:

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

这是我的数据/初始化:

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

一些解释:每个方面都有多个复选框代表值。我们可以选择多个值。我的对象必须是这样的:

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

使用这段代码，每次我选择一个值时，它都会删除前一个值。

我试图在不使用创建的函数的情况下像这样在我的数据中初始化我的对象:

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

而且效果很好。每个方面的所有值都添加到正确的数组中。但是我需要用我的 conf 初始化我的对象和构面名称，如果我不在我的数据中初始化我的对象，它就不起作用。我通过从我的商店获取我的对象来尝试使用计算/创建，但它通过删除前一个对象来不断增加值(value)。

知道我做错了什么吗？谢谢。

Answer 1

只需使用 Vue.set 初始化您的对象:

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

当组件初始化模板时，它不知道 selectedFacets[facetName] 所以要使其响应并正确使用 v-model 你应该使用 Vue .set 突变体。