Question

我对将v模型与“复杂”对象一起使用有一些疑问。这是我的代码：

<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初始化我的对象和构面名称，如果我没有在数据中初始化我的对象，它将无法正常工作。我尝试通过从商店中获取对象来计算/创建对象，但是通过删除上一个对象，它一直在增加价值。

任何关于我做错事情的想法吗？谢谢。

Answer 1

只需使用Vue.set初始化对象：

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

当组件初始化模板时，它不了解selectedFacets[facetName]，因此要使其具有响应性并正确使用v-model，您应该使用Vue.set mutator。

Vue.js：v-for中具有多个复选框的v-model

1 个答案: