[Vuejs]-Vue js text field value becomes empty when new row is appended

You shouldn’t create HTML in vue components, rather you should use the virtual DOM and things like v-for to create the HTML you want instead of doing it with createElement.

And in the case that you do use the v-dom and you run into a similar issue, you want to use key to uniquely tag each node so Vue knows what belongs with what.

But main point is that you shouldn’t be manipulating the DOM directly from Vue functions ever. It’s performance taxing and you lose the benefit of reactivity, as you have noticed.

Look into v-for and vue’s documentation on rendering lists for what you are trying to achieve: https://v2.vuejs.org/v2/guide/list.html