Во 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
и может быть использовано для дальнейшей обработки.