Почему не работает свойство Selected Vue?

Question

[Igor Bodyagin]

Почему не работает свойство selected у элемента Vue select option?

Код:

<label>
                  Категория
                  <select v-model="Category" id="categoryTop"
                          class="select_category">
                    <option value="Большие" selected>Большие</option>
                    <option
                        v-for="cat in categoryOptions"
                        :value="cat"
                    >{{ cat }}</option>
                  </select>
                </label>

В результате выводится все нормально, но input пустой, а нужно, чтобы первый элемент стоял по умолчанию.
Заметил, что Vue зачем-то ставит значение selected="selected" и это не работает, но если ручками в хроме дев тулзом поставить просто <option val="Пример" selected>Пример</option>, то все работает.

Comments

[VladKli]

Если заглянуть в документацию, то, чтобы отобразился в инпуте текст, достаточно просто в свойствах тега option указать value=""
Если это будет НЕрабочий опшн, типа "выберите что-то", нужно добавить ему свойство disabled.

Такой код будет работать.

<select v-model="selected">
  <option disabled value="">Выберите один из вариантов</option>
  <option>А</option>
  <option>Б</option>
  <option>В</option>
</select>

Вот ссылка на документацию на официальный сайт vue

Answer 1

[0xD34F]

Потому что

v-model игнорирует начальное значение атрибутов value, checked или selected на любых элементах форм.

Comments

[Igor Bodyagin]

слышал такое, как быть тогда?

[0xD34F]

Igor Bodyagin, очевидно, указать value интересующего вас option'а в качестве начального значения свойства, используемого в v-model.

[Igor Bodyagin]

0xD34F, Помогло, спасибо!