Radio Buttons no Vue.js

Os radio buttons permitem selecionar uma única opção dentro de um grupo de alternativas. Assim como ocorre com checkboxes, a diretiva v-model conecta o atributo checked a uma propriedade do Vue e monitora mudanças no valor por meio do evento change. O valor inicial é determinado pelo estado do atributo checked.

O exemplo abaixo mostra um conjunto de radio buttons que representam diferentes opções. Quando uma opção é selecionada, seu valor é armazenado na propriedade user:

<!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="radio" value="Tom" v-model="user" />
      <label>Tom</label><br />
      <input type="radio" value="Bob" v-model="user" />
      <label>Bob</label><br />
      <input type="radio" value="Sam" v-model="user" />
      <label>Sam</label><br />
      <span>Selecionado: {{ user }}</span>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            user: "",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

Quando um radio button é selecionado, seu valor é armazenado na propriedade user e exibido na interface.

Exemplo de uso de radio buttons em Vue.js

Radio Buttons Vinculados a Objetos

Cada radio button pode ser vinculado a um objeto, permitindo que a propriedade armazenada contenha mais informações. O atributo v-bind:value permite essa vinculação:

<!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="radio" v-bind:value="{ name: 'Tom', age: 22 }" v-model="user" />
      <label>Tom</label><br />
      <input type="radio" v-bind:value="{ name: 'Bob', age: 25 }" v-model="user" />
      <label>Bob</label><br />
      <input type="radio" v-bind:value="{ name: 'Sam', age: 28 }" v-model="user" />
      <label>Sam</label><br />
      <span v-if="user.name && user.age">Selecionado: {{ user.name }} - {{ user.age }}</span>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            user: {},
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

Quando um radio button é selecionado, o objeto correspondente é armazenado na propriedade user, permitindo acesso direto a seus atributos.

Radio buttons vinculados a objetos em Vue.js

Em vez de definir manualmente cada radio button, uma abordagem mais eficiente é armazenar as opções em um array e criar os radio buttons dinamicamente:

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

Neste exemplo, o array users contém as opções disponíveis. O radio button selecionado é armazenado na propriedade selectedUser, que permite acesso direto aos atributos do objeto.

Documentação oficial:

Form Input Bindings: Radio