Список select

Последнее обновление: 02.11.2020

Элемент select позволяет создать список с возможностью одиночного либо множественного выбора. При привязке к элементу <select> директива v-model отслеживает свойство value вложенных в select элементов <option> и событие change для отслеживания изменения выбиранного элемента. При этом значение атрибута selected у элементов option игнорируется.

Список с одиночным выбором

Выпадающий список с одиночным выбором можно привязать к свойству Vue, которое хранит выбранный элемент:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <select v-model="user">
        <option>Tom</option>
        <option>Bob</option>
        <option>Sam</option>
    </select>
    <span>Выбрано: {{user}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		user:''
	}
  }
}).mount('#app');
</script>
</body>
</html>
Привязка к списку select в Vue 3

Список с множественным выбором

Список select с множественным выбором можно связать с массивом, в который попадут все выбранные значения:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <select v-model="users" multiple>
        <option>Tom</option>
        <option>Bob</option>
        <option>Sam</option>
        <option>Alice</option>
    </select>
    <p>Выбрано: {{users}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users:[]
	}
  }
}).mount('#app');
</script>
</body>
</html>
Привязка к элементу select с множественным выбором в Vue 3

Привязка к массиву объектов

Нередко источником для элементов списка служит массив, элементы которого нередко представляют сложные объекты. Для динамического создания списка из массива применяется директива v-for, а для привязки значения к элементу списка - атрибут v-bind:value:

<div id="app">
    <select v-model="selectedUser">
        <option v-for="user in users" v-bind:value="user.name">{{user.name}}</option>
    </select>
    <span>Выбрано: {{selectedUser}}</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},
                {name:'Alice', age:26}
            ],
		selectedUser:''
	}
  }
}).mount('#app');
</script>

В данном случае в списке отображается значение свойства name объекта из массива и это же свойство name будет использоваться в качестве значения при выборе элемента.

Привязка выбранного объекта в списке select в Vue 3

Однако мы можем выбирать и весь объект в целом:

<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!==null">Выбрано: {{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},
                {name:'Alice', age:26}
            ],
		selectedUser:null
	}
  }
}).mount('#app');
</script>

В данном случае выбранный объект из массива будет попадать в свойство selection.

Выбор объектов в списке select в Vue 3

Привязка к объектам в списке с множественным выбором

Аналогично можно установить привязку к объектам в списке с множественным выбором. В этом случае выбранные элементы попадут в массив:

<div id="app">
    <select v-model="selectedUsers" multiple>
         <option v-for="user in users" v-bind:value="user">{{user.name}}</option>
    </select>
    <h3>Выбранные объекты</h3>
    <ul>
        <li v-for="user in selectedUsers">{{user.name}} - {{user.age}}</li>
    </ul>
</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},
                {name:'Alice', age:26}
            ],
		selectedUsers:[]
	}
  }
}).mount('#app');
</script>
Множественный выбор с привязкой в select в Vue 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850