Capturando dados de input checkbox no Vue.js #vue #vuejs 🚀

Para capturar dados de um input checkbox no Vue.js, você precisa usar a diretiva v-model para vincular o estado do checkbox a uma propriedade de dados no seu componente Vue.

Aqui está um exemplo simples de como capturar os dados de um input checkbox no Vue.js:

1. Primeiro, crie um novo componente Vue e defina uma propriedade no data para armazenar o estado do checkbox:

<template>
  <div>
    <input type="checkbox" v-model="isChecked"> Checkbox
    <button @click="logCheckboxState">Log Checkbox State</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    logCheckboxState() {
      console.log('Checkbox state:', this.isChecked);
    }
  }
};
</script>

Neste exemplo, temos um input checkbox que é vinculado à propriedade isChecked no data com a diretiva v-model. Também há um botão que chama o método logCheckboxState para exibir o estado atual do checkbox.

1. Agora, quando o usuário marcar ou desmarcar o checkbox, o valor da propriedade isChecked será atualizado automaticamente. Isso ocorre porque o v-model cria uma ligação bidirecional entre a propriedade e o estado do input checkbox.

2. Ao clicar no botão "Log Checkbox State", o método logCheckboxState será acionado e o estado atual do checkbox será exibido no console.

Essa é a maneira básica de capturar dados de um input checkbox no Vue.js. Você também pode usar outras técnicas, como usar eventos para capturar alterações no estado do checkbox ou usar formulários mais complexos com vários checkboxes. Mas a abordagem com v-model é a mais simples e eficaz para capturar dados de um input checkbox no Vue.js.