Как сделать реактивность во Vue js?

Question

[Sector567]

Код: https://codepen.io/Gabar/pen/vYOgvVp
Суть работы кода такая:
- тыкаем по синему плюсику - рендерится инпут куда мы можем вписать "имя гостя", после этого данное поле отображается в таблице ниже
- тыкаем дважды по заголовку добавленного инпута и поле удаляется

Проблема:
В HTML, на строке 14 вписывание "Имени гостя" реализовано при помощи @input=""
В HTML, на строке 15 реализовано тоже самое, но при помощи v-model=""

Но в случае удаления, возникает проблема с первым способом - в итоговой таблице удаление происходит верно, а вот
в самих инпутах возникает путаница, здесь инпуты удаляются всегда с конца.

Пример:
- Пытаюсь удалить инпут с заголовком Guest 2 и значением 2, тыкая по заголовку 2 раза
- Видим, что в таблице ДВОЙКИ действительно нет (есть только 1 и 3), то есть удаление произошло корректно, но вот сами инпуты отображаются не корректно, а именно Guest 2 не исчез, а вместо него исчез Guest 3



Вопрос:
Почему так произошло и как это исправить?
P.S. если вместо @input="" на 14 строке использовать v-model="" из 15 строки, то все будет работать корректно.

Answer 1

[Даниил Попов]

Так вы же не привязываете входные значения вот они и не подставляются. Вот так все работает.

<input type="text" class="form-control" @input="onInput(index, $event)"  :value="guests[index]">

А в чем проблема с v-model? Почему не через него?

Произошло это потому, что vue минимизирует изменения в DOM, а вы никак не указали, что вам нужно именно это поле. Решения 2: либо как я выше указал, задавать значение для поля, либо использовать уникальные ключи

Comments

[Sector567]

Большое спасибо за ответ.
Да я просто только начинаю изучать Vue, вот пытаюсь понять как это работает и действительно ли
v-model можно заменять @input и какая между ними разница

[Даниил Попов]

Sector567, v-model, грубо говоря, - это синтаксический сахара для @input + :value

Тут можно подробнее почитать:
Тыц 1
Тыц 2

Answer 2

[Alex]

Проблема тут вот в чем:
У вас есть массив
['1', '2', '3']

Они так и выводятся


Затем вы удаляете элемент под индексом 1
['1', '3']
Ниже в таблице выводятся эти числа так, как вы и ожидаете.

Но! После удаления, значение "3" находится под индексом "1". От сюда, и ваш label — Guest {{ index + 1 }} = Guest 2
А значение в поле не обновляется, потому что вы не привязали значение данных к полю — :value="name"



Собственно v-model это короткий формат записи :value="value" @input="value = newValue"

Рабочий вариант + строка для теста:

<input type="text" class="form-control" @input="onInput(index, $event)" :value="name">
Guest name: {{name}}

Comments

[Sector567]

Большое спасибо за разъяснение

[Yustas Alexu]

Как все сложно в этом вашем вью. Хорошо что я пишу на реакте )