Список select

Элемент select позволяет создать список с возможностью одиночного и множественного выбора.

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

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

<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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			user:''
        }
    });
</script>

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

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

<div id="app">
	<select v-model="users" multiple>
		<option>Tom</option>
		<option>Bob</option>
		<option>Sam</option>
		<option>Alice</option>
	</select>
	<span>Выбрано: {{users}}</span>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users:[]
        }
    });
</script>

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

Нередко источником для элементов списка служит массив, элементы которого нередко представляют сложные объекты. Для динамического создания списка из массива применяется директива 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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users:[
				{name:'Tom', age:22},
				{name:'Bob', age:25},
				{name:'Sam', age:28},
				{name:'Alice', age:26}
			],
			selectedUser:''
        }
    });
</script>

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

<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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users:[
				{name:'Tom', age:22},
				{name:'Bob', age:25},
				{name:'Sam', age:28},
				{name:'Alice', age:26}
			],
			selectedUser:null
        }
    });
</script>

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

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

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

<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@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users:[
                {name:'Tom', age:22},
                {name:'Bob', age:25},
                {name:'Sam', age:28},
                {name:'Alice', age:26}
            ],
            selectedUsers:[]
        }
    });
</script>