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
selecteddos<option>é ignorado, pois a diretivav-modelgerencia 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.
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.
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.
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.
Documentação oficial: