The problem is as follows:
I have several lists with a title, where it serves as a "select all" but it should only select the checkboxes that are its "siblings".
But I can not check them in the "select all" of each list and update the final quantity at the same time.
I've done an example showing a list being used:
var app = new Vue({
el: '#app',
data: {
checks: [],
lista: [{
"proprietario": "Jon Snow",
"id": "0",
"lojas": [{
"id": "0",
"nome": "Loja 1"
},
{
"id": "1",
"nome": "Loja 2"
},
],
},
{
"proprietario": "Jon Snow 2",
"id": "1",
"lojas": [{
"id": "3",
"nome": "Loja 12323"
},
{
"id": "4",
"nome": "Loja 2123123"
},
],
},
],
},
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script><divid="app">
<p>Quantidade Final: {{checks.length}}</p>
<div class="wrapper" v-for="(list,i) in lista">
<div class="w-select-all">
<input type="checkbox" value="" :id="'selectAll'+list.id">
<label for="selectAll0">Selecionar Todos</label>
</div>
<div class="w-check" v-for="(loja,i) in list.lojas">
<input type="checkbox" :value="loja.id" :id="'chk'+loja.id" v-model="checks">
<label :for="'chk'+loja.id">{{loja.nome}}</label>
</div>
</div>
{{checks}}
</div>