Как настроить :selected в VUE3?

В Vue.js 3, для установки значения атрибута selected в элементе <option> используется директива v-model. Вот как вы можете настроить выбранный элемент в Vue.js 3:

1. Сначала необходимо создать переменную в объекте data, которая будет содержать значение выбранного элемента. Например, добавим переменную selectedItem в объект data:

data() {
  return {
    selectedItem: 'option1' // значение выбранного элемента по умолчанию
  };
}

2. Далее, добавим директиву v-model к элементу <select>, чтобы связать его со значением переменной selectedItem:

<select v-model="selectedItem">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

3. Теперь, при изменении выбранного значения, переменная selectedItem будет обновляться автоматически.

Вы также можете назначить начальное значение переменной selectedItem равным значению из внешнего источника данных, например, из хранилища данных или серверного запроса.

Кроме того, вы можете использовать вычисляемые свойства (computed) или слушатели (watch) для реагирования на изменения значения selectedItem и применения соответствующей логики. Например, вычисляемое свойство может вернуть текстовое значение выбранного элемента, а слушатель может запускать функцию при каждом изменении выбранного значения.

Надеюсь, что эта информация окажется полезной и поможет вам настроить атрибут selected в Vue.js 3.