Elemento Select no Vue.js

O elemento <select> permite criar listas com opções de seleção única ou múltipla. Quando a diretiva v-model é aplicada a um <select>, ela se conecta ao atributo value dos elementos <option> internos e escuta o evento change para monitorar alterações na seleção.

É importante notar que o atributo selected dos <option> é ignorado, pois a diretiva v-model gerencia o valor selecionado dinamicamente.

Seleção Única

Um <select> com seleção única pode ser vinculado a uma propriedade do Vue que armazena a opção escolhida:

<!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">
    <select v-model="user">
        <option>Tom</option>
        <option>Bob</option>
        <option>Sam</option>
    </select>
    <span>Selecionado: {{ user }}</span>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { 
                    user: ''
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

Quando um item é selecionado, o valor correspondente é armazenado na propriedade user.

Exemplo de uso de elemento select em Vue.js

Lista com Seleção Múltipla

O atributo multiple pode ser adicionado ao <select>, permitindo a escolha de múltiplas opções. Os valores selecionados são armazenados em um array:

<!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">
    <select v-model="users" multiple>
        <option>Tom</option>
        <option>Bob</option>
        <option>Sam</option>
        <option>Alice</option>
    </select>
    <p>Selecionados: {{ users }}</p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { 
                    users: []
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

Os valores das opções escolhidas são adicionados ao array users, permitindo a seleção de vários itens simultaneamente.

Elemento select com seleção múltipla em Vue.js

Vinculando a um Array de Objetos

Quando os itens da lista são criados dinamicamente, a diretiva v-for pode ser usada para criar os elementos <option>, enquanto o atributo v-bind:value define o valor armazenado ao selecionar uma opção:

<div id="app">
  <select v-model="selectedUser">
    <option v-for="user in users" v-bind:value="user.name">{{ user.name }}</option>
  </select>
  <span>Selecionado: {{ selectedUser }}</span>
</div>
<script>
  Vue.createApp({
    data() {
      return { 
        users: [
          { name: 'Tom', age: 22 },
          { name: 'Bob', age: 25 },
          { name: 'Sam', age: 28 },
          { name: 'Alice', age: 26 }
        ],
        selectedUser: ''
      };
    }
  }).mount('#app');
</script>

Neste exemplo, os nomes dos objetos do array users são exibidos na lista, e o valor selecionado é armazenado na propriedade selectedUser.

Vinculando a um array de objetos em Vue.js

Selecionando o Objeto Completo

Em vez de armazenar apenas um atributo do objeto, todo o objeto pode ser selecionado e armazenado diretamente na propriedade selectedUser:

<div id="app">
<select v-model="selectedUser">
    <option v-for="user in users" v-bind:value="user">{{ user.name }}</option>
</select>
<span v-if="selectedUser">Selecionado: {{ selectedUser.name }} - {{ selectedUser.age }}</span>
</div>
<script>
Vue.createApp({
    data() {
        return { 
            users: [
                { name: 'Tom', age: 22 },
                { name: 'Bob', age: 25 },
                { name: 'Sam', age: 28 },
                { name: 'Alice', age: 26 }
            ],
            selectedUser: null
        };
    }
}).mount('#app');
</script>

Neste caso, a propriedade selectedUser armazena o objeto completo correspondente à opção escolhida.

Selecionando Múltiplos Objetos

A mesma abordagem pode ser aplicada a um <select> com múltipla escolha, permitindo que um array armazene os objetos selecionados:

<div id="app">
<select v-model="selectedUsers" multiple>
    <option v-for="user in users" v-bind:value="user">{{ user.name }}</option>
</select>
<h3>Usuários Selecionados</h3>
<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 },
                { name: 'Alice', age: 26 }
            ],
            selectedUsers: []
        };
    }
}).mount('#app');
</script>

Com essa abordagem, os objetos correspondentes às opções escolhidas são armazenados no array selectedUsers, permitindo acesso direto a seus atributos.

Selecionando múltiplos objetos em Vue.js