0

Estou desenvolvendo uma feature que lista produtos e seu estado (habilitado, desabilitado). Para escolher o estado do produto, estou utilizando um checkbox no formato de toggle-switch.

<div class="col-md-6 col-xl-10" v-for="product in products" :key="product.id">
.
.
.

<i class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" :id="product.id" v-model="product.status">
  <label class="custom-control-label" for="customSwitches"> {{ product.status }} </label>
</i>

Para deixar dinâmico esse checkbox, tentei usar a checkbox com o id referenciando o produto :id="product.id".

O problema que quando utilizei dessa forma, o checkbox para de funcionar, fica sempre false e ao clicar ele não altera o estado (nem graficamente).

1 Resposta 1

1

Você não criou um evento para alterar o status. Você pode fazer isso utilizando a diretiva v-on:click ou de forma encurtada @click como no exemplo abaixo:

<i class="custom-control custom-switch" @click="product.status = !product.status">
...
</i>

new Vue({
  el: "#app",
  data() {
    return {
      products: [
        {
          id: 1,
          status: true
        },
        {
          id: 2,
          status: false
        }
      ]
    };
  }
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  
  <div class="col-md-6 col-xl-10" v-for="product in products" :key="product.id">

<i class="custom-control custom-switch" @click="product.status = !product.status">
  <input type="checkbox" class="custom-control-input" v-model="product.status" >
  <label class="custom-control-label" for="customSwitches"> {{ product.status }} </label>
</i>
  
</div>

3
  • Muito obrigado! Resolveu aqui! Commented 16/04/2020 às 20:53
  • Tem como utilizar a diretiva @change nesse input? Commented 19/06/2020 às 19:21
  • 1
    @MatheusCosta Não. Mas você pode ouvir um evento de change no input ou então extrair a atribuição inline para um método e criar a regra que desejar Commented 27/06/2020 às 0:53

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 .