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オブジェクトの2つの異なるパラメータにそれらを割り当てるだけです。

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>