Во Vue.js для передачи id выбранного элемента вместо его значения, необходимо использовать атрибут value вместо атрибута id в html-элементе <option>. Также при работе с формой, где присутствует <select>, можно использовать директиву v-model для двусторонней привязки данных.
Вот пример использования:
1. Установите Vue.js, если его еще нет в вашем проекте, добавив следующую строку в тег <head> вашего HTML-документа:
<script src="https://unpkg.com/vue"></script>
2. Создайте экземпляр Vue.js:
<div id="app">
<select v-model="selectedId">
<option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>
<p>Выбранный элемент: {{ selectedId }}</p>
</div>
3. Определите данные внутри экземпляра Vue.js:
new Vue({
el: '#app',
data: {
selectedId: null,
items: [
{ id: 1, name: 'Первый элемент' },
{ id: 2, name: 'Второй элемент' },
{ id: 3, name: 'Третий элемент' },
]
}
})
В этом примере мы используем директиву v-for для создания элементов <option> на основе массива items. В качестве значения value для каждого <option> мы устанавливаем item.id, что позволяет передавать id выбранного элемента. Затем мы используем директиву v-model для привязки выбранного id к свойству selectedId.
В отображении используется межполосная связь ({{ selectedId }}), чтобы показать выбранный id в реальном времени.
Теперь, когда вы выберете элемент из выпадающего списка, его id будет доступно в свойстве selectedId и может быть использовано для дальнейшей обработки.