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.