7

O problema é o seguinte:

Tenho várias listas com um título, onde ele serve como um "selecionar todos" mas ele deve selecionar apenas os checkboxes que são seus "irmãos".

Porém não consigo checá-los no "selecionar todos" de cada lista e atualizar a quantidade final ao mesmo tempo.

Fiz um exemplo mostrando uma lista sendo utilizada:

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>
<div id="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>

0

1 Resposta 1

1

Usa mais uma array multipleChecks para guardares os IDs de proprietário marcados. Usa @click="toggle($event, lista[i].lojas)" para poder chamar um método com as lojas de um dado proprietário e poder inserir/remover essas lojas do checks.

Usa também um watch no checks para detectar lojas dentro de um grupo que sejam removidas para desmarcar o grupo.

const proprietarios = [{
    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"
      }
    ]
  }
];

new Vue({
  el: "#app",
  data: {
    checks: [],
    multipleChecks: [],
    lista: proprietarios
  },
  watch: {
    checks(lojas) {
      this.lista.forEach(lista => {
        const completa = lista.lojas.every(loja => lojas.includes(loja.id));
        if (completa) {
          this.multipleChecks = this.multipleChecks.concat(lista.id).filter((el, i, arr) => arr.indexOf(el) == i);
        } else {
          this.multipleChecks = this.multipleChecks.filter(id => id != lista.id);
        }
      });
    }
  },
  methods: {
    toggle(e, lojas) {
      const addAll = e.target.checked;
      var idsLojas = lojas.map(l => l.id);
      if (addAll) {
        this.checks = this.checks.concat(idsLojas).filter((el, i, arr) => arr.indexOf(el) == i);
      } else {
        this.checks = this.checks.filter(loja => !idsLojas.includes(loja));
      }
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  <p>Quantidade Final: {{checks.length}}</p>
  <div class="wrapper" v-for="(list, i) in lista">
    <div class="w-select-all">
      <input type="checkbox" @click="toggle($event, lista[i].lojas)" :value="list.id" v-model="multipleChecks">
      <label>Selecionar Todos ({{list.proprietario}})</label>
    </div>
    <div class="w-check" v-for="(loja, i) in list.lojas">
      <input type="checkbox" :value="loja.id" v-model="checks">
      <label :for="'chk'+loja.id">{{loja.nome}}</label>
    </div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .