Блог

Если я удаляю background-green привязку или value привязку класса из select элемента, он работает как обычный выпадающий список. Но, допустим, я не удалил background-green привязку класса, затем после выбора выбранный параметр не отображается, но если я снова выберу тот же выбранный параметр или другой параметр, он будет отображаться. То же самое поведение с value привязкой. Итак, почему он работает во второй раз? Это моя настоящая проблема / путаница.

Вот ссылка на запущенный пример с примером кода.

Проблема заключается в том :value="defaultValue" , что она фактически не меняется (потому defaultValue что никогда не меняется), а также в побочном эффекте повторного запуска, который происходит в первый раз.

Поскольку :value , по сути, всегда "" , каждый раз <select> , когда повторно отображается, Vue присваивает значение этой пустой строке.

Вы handleInput установили fillBg = true , который запускает повторный рендеринг, потому background-green что его не было в первоначальном рендере. Это означает, что Vue сбросит значение <select> back на defaultValue (пустой)

В то время, когда кажется, что он работает после первого выбора, на самом деле происходит локальное состояние DOM, показывающее, что вы выбрали. Поскольку в vdom нет изменений (зеленый фон уже есть), Vue не выполняет повторный рендеринг и, следовательно, не сбрасывает значение.

Правильный способ исправить это — либо обновить defaultValue (возможно, переименовать это) во время события ввода, либо использовать v-model . Суть в том, чтобы Vue устанавливал правильное значение при каждом рендеринге.

 handleInput(e) {
  this.fillBg = true;
  this.defaultValue = e.target.value;
},