Vue.js에서 중첩 배열을 사용하여 v-model을 그룹화 할 수 있습니까?

Question

나는 vue 응용 프로그램에서 그룹에 대한 필터링을 시도하고 있습니다. 중첩 배열을 사용하여 v-model을 그룹화 할 수 있습니까? 나는 아래의 템플릿으로 시도했습니다

...

<div id="app"> 
    <div class="filter__control filter__control--tags"> 
    <div class="filter__label">Colour</div> 
    <div class="filter__list"> 
     <label><input type="checkbox" v-model="selectedTags[0]" value="Harvest">Harvest</label> 
     <label><input type="checkbox" v-model="selectedTags[0]" value="Moss">Moss</label> 
     <label><input type="checkbox" v-model="selectedTags[0]" value="Navy">Navy</label> 
     <label><input type="checkbox" v-model="selectedTags[0]" value="White">White</label> 
    </div> 
    </div> 

    <div class="filter__control filter__control--tags"> 
    <div class="filter__label">Size</div> 
    <div class="filter__list"> 
     <label><input type="checkbox" v-model="selectedTags[1]" value="L">L</label> 
     <label><input type="checkbox" v-model="selectedTags[1]" value="M">M</label> 
     <label><input type="checkbox" v-model="selectedTags[1]" value="S">S</label> 
     <label><input type="checkbox" v-model="selectedTags[1]" value="XL">XL</label> 
     <label><input type="checkbox" v-model="selectedTags[1]" value="XS">XS</label> 
    </div> 
    </div> 
</div> 

그리고 VUE 예 ..

var app = new Vue({ 
    el: '#app', 
    data: { 
    selectedTags: [] 
    }, 
    watch: { 
    selectedTags: function() { 
     // I expect the array to look something like... 
     this.selectedTags = [ 
     ["Navy"], 
     ["XS", "S"] 
     ] 
    } 
    } 
}); 

Answer 1

는 감시자 필요가 없습니다. SelectedTags 객체의 두 가지 매개 변수에 이들을 지정하면됩니다.

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    selectedTags: { 
 
     color: [], 
 
     size: [], 
 
    } 
 
    }, 
 
    
 
    // if you need exact format of the tags that you wanted use computed property. 
 
    
 
    computed: { 
 
    \t SelectedTagsArrays: function(){ 
 
     \t return [this.selectedTags.color, this.selectedTags.size]; 
 
     } 
 
    } 
 
});

<div id="app"> 
 
    <div class="filter__control filter__control--tags"> 
 
    <div class="filter__label">Colour</div> 
 
    <div class="filter__list"> 
 
     <label><input type="checkbox" v-model="selectedTags.color" value="Harvest">Harvest</label> 
 
     <label><input type="checkbox" v-model="selectedTags.color" value="Moss">Moss</label> 
 
     <label><input type="checkbox" v-model="selectedTags.color" value="Navy">Navy</label> 
 
     <label><input type="checkbox" v-model="selectedTags.color" value="White">White</label> 
 
    </div> 
 
    </div> 
 

 
    <div class="filter__control filter__control--tags"> 
 
    <div class="filter__label">Size</div> 
 
    <div class="filter__list"> 
 
     <label><input type="checkbox" v-model="selectedTags.size" value="L">L</label> 
 
     <label><input type="checkbox" v-model="selectedTags.size" value="M">M</label> 
 
     <label><input type="checkbox" v-model="selectedTags.size" value="S">S</label> 
 
     <label><input type="checkbox" v-model="selectedTags.size" value="XL">XL</label> 
 
     <label><input type="checkbox" v-model="selectedTags.size" value="XS">XS</label> 
 
    </div> 
 
    </div> 
 
</div>