Vuejs : v-for에 여러 개의 확인란이 있는 v-model

Vuejs : v-for에 여러 개의 확인란이 있는 v-model

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>

여기 제 데이터 / init:

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로 내 물건과 면 이름을 초기화해야 하고 만약 내가 내 데이터에서 내 물건을 초기화하지 않으면, 그것은 작동하지 않는다.계산/생성, 스토어에서 내 물건을 가져와 시도했지만, 이전 물건을 제거하여 계속 가치를 더한다.

내가 뭘 잘못했는지 알기나 해?고마워요.

다음을 사용하여 개체를 초기화하십시오.Vue.set:

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

구성 요소가 템플릿을 초기화할 때 알 수 없음selectedFacets[facetName]그래서 반응하고 올바르게 작업하기 위해v-model당신은 사용해야 한다.Vue.set돌연변이자

참조URL: https://stackoverflow.com/questions/51591473/vuejs-v-model-with-multiple-checkbox-in-v-for