Выбранное по умолчанию значение не работает в Vue.js

Question

Я пытаюсь установить значение по умолчанию для моего выпадающего списка.Мой код выглядит так:

        <select v-model="newSelectedUnit" @change="selectUnit(newSelectedUnit)" class="custom-select">
          <option v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == Selectedunit.id">{{ unit.name }}</option>
        </select>

, но не выбрано значение по умолчанию.Я уже пытался жестко запрограммировать Selectedunit.id в 32712 (который является одним из идентификаторов устройства):

            <select v-model="newSelectedUnit" @change="selectUnit(newSelectedUnit)" class="custom-select">
              <option  v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == 32712">{{ unit.name }}</option>
            </select>

В Инспекторе Chrome есть тег <option> со значением 32712:

<option value="32712">CYLINDER</option>

, но по умолчанию он не выбран.

РЕДАКТИРОВАТЬ: Я заметил, что есть проблема с атрибутом selected.В приведенном выше примере, если я установил другой атрибут:: selectedXXX = "unit.id == 32712", я получил ожидаемый атрибут в инструментах разработчика Chrome:

<option selectedXXX="true" value="32712">CYLINDER</option>

EDIT2: ЕслиЯ удаляю v-model="newSelectedUnit" Я выбрал правильное значение!Но почему?

Answer 1

Если вы используете материализованный шаблон css, он добавляет

select { display:none }

в ваше приложение по умолчанию css

select: { display: block }

оно появится снова!

Answer 2

Используйте либо "@change и :selected", либо "v-model", но не оба.

Теперь v-model на <select> попытается выбрать единицу измерения на основе значенияв newSelectedUnit

Если начальное значение выражения v-модели не совпадает ни с одним из параметров, элемент будет отображаться в «невыбранном» состоянии.

https://vuejs.org/v2/guide/forms.html#Select