Почему input теряет фокус?

Question

[r_g_b_a]

https://jsfiddle.net/twva3dc4/
После ввода первого символа input теряет фокус. При этом, если удалить один из div'ов по бокам поля, то проблемы не наблюдается. Почему так происходит и как предотвратить потерю фокуса?

Answer 1

[Александр]

В данном случае используйте v-show (Почему?).

Comments

[r_g_b_a]

Замена v-if на v-show решила проблему, но хотелось бы понять причину ее возникновения. При создании двух блоков вокруг input на jquery потери фокуса не происходит. https://jsfiddle.net/49ov8xnr/
По вашей ссылке я не нашел объяснения. Либо укажите поточнее, в каком разделе смотреть.

[Виталий Першин]

r_g_b_a,

Разница в том, что элемент с v-show будет всегда оставаться в DOM, а изменяться будет лишь свойство display в его параметрах CSS.

Answer 2

[profesor08]

Потому что у тебя перерисовывается весь компонент, так как меняется количество, тип или порядок элементов. Помни это, живи с этим, борись с этим, и ненавидь это.

Пробуй скрывать свои дополнительные элементы через v-show, или стилями.