Возник такой вопрос, есть дерево checkbox - ов (допустим их 3). Нужно сделать так, чтобы при нажатии на один checkbox у двух других тоже появилась галочка (т.е. тоже стал отмеченным) и при снятии с этих двух checkbox-ов у родителя галочка убиралась.
1 ответ
var app = new Vue({
el: '#app',
data: {
items: [ "Apple", "Google", "Microsoft" ],
companies: [],
checkedAll: false
},
methods: {
checkAll: function() {
this.companies = [];
if (!this.checkedAll) {
for (let key in this.items) {
this.companies.push(this.items[key]);
}
}
},
checkUpdate: function() {
if (this.companies.length === this.items.length) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
}
}
});
ul {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" v-on:click="checkAll()" v-model="checkedAll">Выбрать все
<ul>
<li v-for="item in items">
<input type="checkbox" v-bind:value='item' v-model="companies" v-on:change="checkUpdate()">{{ item }}
</li>
</ul>
<span>Выбрано: {{ companies }}</span>
</div>