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:
- 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.
-
Agora, quando o usuário marcar ou desmarcar o checkbox, o valor da propriedade
isChecked
será atualizado automaticamente. Isso ocorre porque ov-model
cria uma ligação bidirecional entre a propriedade e o estado do input checkbox. - 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.