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

Documentação oficial:

Form Input Bindings