[英]Is it possible to group v-model with a nested array in Vue.js?
I'm trying to do filtering on groups in a vue app. 我正在尝试对vue应用程序中的组进行过滤。 Is it possible to group v-model with a nested array?
是否可以使用嵌套数组对v模型进行分组?
I've tried with the below template... 我已经尝试过以下模板...
<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>
And vue instance.. 和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"]
]
}
}
});
There is no need for the watcher. 无需观察者。 Just assign them to 2 different parameters of your SelectedTags object.
只需将它们分配给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: { SelectedTagsArrays: function(){ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.