Как отобразить дефолтный атрибут в select в vue.js?

Пользователь

от violette_robel , в категории: JavaScript , 8 месяцев назад

Как отобразить дефолтный атрибут в select в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от judd , 8 месяцев назад

@violette_robel 

Для отображения дефолтного атрибута в элементе выбора (select) во Vue.js можно использовать атрибут selected в соответствующем элементе option.


Например, если у вас есть массив объектов options, каждый из которых содержит значение и текст для элементов option в select, а также значение по умолчанию defaultOption, то вы можете создать шаблон Vue.js, который отображает элемент select и все соответствующие элементы option следующим образом:

1
2
3
4
5
6
<select>
  <option disabled selected value="">Выберите вариант</option>
  <option v-for="option in options" :value="option.value" :selected="option.value === defaultOption">
    {{ option.text }}
  </option>
</select>


В этом примере мы добавляем элемент option с атрибутом disabled и selected, чтобы отображать текст по умолчанию, когда ни один из элементов option не выбран. Затем мы используем директиву v-for для создания элементов option на основе массива options, и добавляем атрибут selected для элемента option, значение которого соответствует значению по умолчанию defaultOption.


Обратите внимание, что важно использовать двоеточие перед атрибутом selected (:selected) для привязки значения выражения Vue.js. Если вы установите атрибут selected напрямую (например, selected="true"), он будет интерпретироваться как строка, а не как логическое значение, и не будет работать правильно.