Как правильно привязать значения к компоненту Vue?

Question

[lem_prod]

Разбираюсь с Vue.js
вот такую штуку написал

https://jsfiddle.net/veuop8m7/1/

2 списка, один в root элементе, и у него напрямую v-model
другой через компонент, и у него прописаны :value и @change
для наглядности, в компоненте делаю {{value}}, что бы видеть, что привязка работает

через 2 секунды, меняю список, по которому рендерит <option>
через еще 2, меняю value
помогите разобраться, почему элементы при этом, ведут себя по разному?

Answer 1

[lega]

Все просто, в компоненте используется директива :value - она не отслеживает изменения option как это делает v-model.

Дополню: при изменении option, браузер автоматический корректирует значение select.value, :value это не учитывает.

Comments

[lem_prod]

Все просто, в компоненте используется директива :value - она не отслеживает изменения option как это делает v-model.

v-model это просто синтаксический сахар для

:value="value" @input="value = $event.target.value"

, изменения отслеживаются в обоих случаях, я даже в примере, что бы это показать, делал просто вывод {{value}}

в варианте с компонентом, select "запоминает" selectedIndex, а без компонента - нет...вопрос "почему?"

[lega]

v-model это просто синтаксический сахар для

Это что-б новичков не грузить, по факту там гораздо больше "мяса".

изменения отслеживаются в обоих случаях

перечитайте, я говорю о "не отслеживает изменения option", речь не о value.

в варианте с компонентом, select "запоминает" selectedIndex, а без компонента - нет...вопрос "почему?"

Это делает сам браузер (или лучше сказать ничего не делает), если изменить текст/значение в option то selectedIndex не меняется, т.е. для select особо ничего не поменялось. Поэтому позиция остается на месте.

А вариант с v-model, директива отслеживает изменение дочерних option и обновляет select.

Итого: v-model работает правильно - сбрасывает значение, а :value не правильно - рассинхронизация DOM и модели.

[lem_prod]

lega: да, уже дошел до того, что вы описали ниже, решил с помощью ключей https://ru.vuejs.org/v2/guide/conditional.html#Упр...

Answer 2

[Evgeny Kulakov]

Как вариант: https://jsfiddle.net/kulakoff/ywk9ova8/

Comments

[lem_prod]

но мне надо было, что бы работало, как вторая форма)

решил добавлением в select аттрибута key, который генерируется от list
суть в том, что Vue не перерисовывал select, и оставался selectedIndex у элемента

[Evgeny Kulakov]

Можете код показать? Я пробовал так сделать, но не заработало.

[lem_prod]

Evgeny Kulakov: вот https://jsfiddle.net/oknesar/veuop8m7/2/

на решение натолкнуло это https://ru.vuejs.org/v2/guide/conditional.html#%D0...

[Evgeny Kulakov]

Спасибо, разобрался) Изначально неправильно понял суть проблемы.

[lem_prod]

Evgeny Kulakov: та у меня просто 6 селеков в форме, и они между собой связанны, и когда изменяешь один, в других могут меняться наборы опций, и проблема было в том, что набор менялся, и value сбрасывалось, но в интерфейсе селект после обновления оставался выбранным, а должен был сбрасывать значение