Vue: <select>связанный с массивом работает некорректно после splice ()</select>

Созданный на 30 сент. 2016 · 6Комментарии · Источник: vuejs/vue

Рассмотрим следующий код:

<div id="demo">
  <select v-model="selected" number>
    <option v-for="opt in options" :value="$index" number>{{opt}}</option>
  </select>
</div>

В <select> каждое значение параметра связано с $index . Если мы выполняем splice() на options , например, options.splice(0,1) , $index некорректно синхронизируется с параметрами.

Например, пусть options=['a','b'] и обработанный HTML будет выглядеть (но не совсем):

<div id="demo">
  <select selectedIndex="0">
    <option value="0">a</option>
    <option value="1">b</option>
  </select>
</div>

После options.splice(0,1) , затем options=['b'] , но обработанный HTML-код выглядит следующим образом:

<div id="demo">
  <select selectedIndex="0">
    <option value="1">b</option>
  </select>
</div>

Значение опции 'b' не становится 1, которое должно быть 0 из-за $index . Возможно, это не ошибка, но это странно.

Ниже представлена живая демонстрация этой проблемы:
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

Источник

peteranny

Самый полезный комментарий

Протестировано на 2.0, и все работает как положено: https://jsfiddle.net/dycmgzcm/
Поэтому я отмечаю это как ошибку 1.x

fnlctrl 2 окт. 2016

👍2

Все 6 Комментарий

Просто добавьте выбранный атрибут в свой шаблон selected="{{$index == selected}}"

Я обновляю демо здесь https://jsfiddle.net/trwp98g9/5/

defcc 1 окт. 2016

👍1

@peteranny Можете уточнить, каково было ожидаемое поведение?

После options.splice (0,1) затем options = ['b'], но обработанный HTML становится:
<option value="1">b</option>

Я не получаю того же результата, что и вы, отсюда:
Перед нажатием удалить:
before

После нажатия:
after

Значение опции 'b' не становится 1, которое должно быть 0 из-за $ index

Так что именно должно стать? Значение «b» было 1 до щелчка и стало 0 после щелчка.

fnlctrl 1 окт. 2016

@fnlctrl Хм, спасибо за ваше тестирование. Думаю, я задал неправильный вопрос.
Согласно вашему тестированию, значение 'b' действительно стало 0 после щелчка.

Мой истинный вопрос: теперь, когда значение 'b' было 0, почему <select> все равно не выбрал 'b'?
Как видно на вашем изображении, <select> вообще не выбрал ни одной опции, тогда как <select> должен выбрать вариант со значением 0.
(Вот почему я ошибся, что значение b не изменилось.)

peteranny 2 окт. 2016

@peteranny Это может быть ошибка, потому что selected осталось 0, в то время как options изменилось, и предполагается, что доменное имя отражает это изменение, но я не уверен ..

На данный момент вы можете попробовать добавить selected prop в соответствии с предложением :selected="$index == selected" )
Или вы можете добавить опору track-by к <options> , что, вероятно, заставило vue подумать, что обновление выбранного значения в dom безопасно. https://jsfiddle.net/74ncq90w/

fnlctrl 2 окт. 2016

👍2

Протестировано на 2.0, и все работает как положено: https://jsfiddle.net/dycmgzcm/
Поэтому я отмечаю это как ошибку 1.x

fnlctrl 2 окт. 2016

👍2

Устранение проблем с версией 1.x, поскольку версия 1.x окончена и получит только критические исправления безопасности.