1

I am dynamically adding inputs of type text to a vuex collection. It adds the input at specific index. It works good, no problem with that. The issue happens when I write some value in the input and then try to add a new one. The input value jumps to the newly added input. Here is a simple code example: https://codesandbox.io/s/0yrzrw6120

Steps to reproduce:

There is a default input. You can add inputs below that, so:

  1. Add a new input.
  2. Write some value in the newly added input.
  3. Add a new input again from the default button.

What I am expecting is a new input below default with no value in it, and it works but the value of the last input jumps to the newly added.

I understand is not a problem with the additions of items but the value in the inputs.

Diego Cortez
  • 23
  • 4
  • The issue is that you are using the `index` as the key for the `v-for` element. See https://stackoverflow.com/questions/44531510/why-not-always-use-the-index-as-the-key-in-a-vue-js-for-loop. You need to give each object in the `collection` array a unique identifier and use that as the key value instead. – thanksd Dec 07 '18 at 21:20

0 Answers0