Checkboxes no Vue.js

Checkboxes representam elementos de controle que podem estar em dois estados: marcado ou desmarcado. Quando a diretiva v-model é aplicada em checkboxes, ela conecta o atributo checked a uma propriedade do Vue e monitora alterações por meio do evento change. Por padrão, o estado marcado corresponde ao valor true e o desmarcado ao valor false.

No exemplo a seguir, um checkbox simples está vinculado a um valor booleano:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app"> 
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { 
                    checked: true
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

O estado marcado é vinculado ao valor true, enquanto o desmarcado é vinculado ao valor false.

Exemplo de checkbox com v-model em Vue.js

Checkbox com Valores Personalizados

É possível configurar valores personalizados para os estados marcado e desmarcado por meio dos atributos true-value e false-value:

<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" v-model="light" true-value="on" false-value="off" />
<span v-if="light === 'on'">Desligar</span>
<span v-else>Ligar</span>
</div>
<script>
Vue.createApp({
    data() {
        return {
            light: 'on'
        };
    }
}).mount('#app');
</script>

Neste exemplo, o estado marcado corresponde ao valor "on" e o desmarcado ao valor "off". A propriedade light armazena o valor atual e pode ser avaliada diretamente em expressões como light === 'on'.

Exemplo de checkbox com valores personalizados em Vue.js

Checkbox com Array

Multiplos checkboxes podem ser vinculados a um array. Nesse caso, ao marcar um checkbox, seu valor é adicionado ao array, e ao desmarcá-lo, ele é removido:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
    <input type="checkbox" value="Tom" v-model="selectedUsers">
    <label>Tom</label><br>
    <input type="checkbox" value="Bob" v-model="selectedUsers">
    <label>Bob</label><br>
    <input type="checkbox" value="Sam" v-model="selectedUsers">
    <label>Sam</label><br>
    <span>Selecionados: {{ selectedUsers }}</span>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { 
                    selectedUsers: []
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

Neste exemplo, os valores dos checkboxes ("Tom", "Bob", "Sam") são adicionados ao array selectedUsers conforme selecionados.

Exemplo de checkboxes vinculados a um array em Vue.js

Checkbox com Objeto

Outra opção é vincular checkboxes a um objeto. Nesse caso, O atributo v-bind:value é usado para vincular dinamicamente um checkbox a um objeto:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
    <template v-for="user in users">
        <input type="checkbox" v-bind:value="user" v-model="selectedUsers">
        <label>{{ user.name }}</label><br>
    </template>
        
    <ul>
        <li v-for="user in selectedUsers">{{ user.name }} - {{ user.age }}</li>
    </ul>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { 
                    users: [
                        { name: 'Tom', age: 22 },
                        { name: 'Bob', age: 25 },
                        { name: 'Sam', age: 28 },
                    ],
                    selectedUsers: []
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

Neste exemplo, os valores dos checkboxes são objetos com as propriedades name e age que são adicionados ao array selectedUsers ao serem selecionados.

Exemplo de checkboxes vinculados a um objeto em Vue.js