Vuejs reactive binding of strings in a array

Question

I have a plain array of strings in my data and I would like to enable their editing/adding with

<ul>
    <li v-for="(string, index) in strings" :key="index">
       <input v-model="string">
    </li>
</ul>

the problem is that the strings in the array are not changed when the user types in the input.

Here is a Jsfiddle https://jsfiddle.net/franta/74ybd0g5/10/ I would like the "Strings" part to work like the "Things".

Thanks

Does this answer your question? Why v-model doesn't work with an array and v-for loop? — cesartalves
– cesartalves, Commented Jun 9, 2020 at 13:07
@cesartalves thanks that explains why it does not work but it does not say how to work with arrays of plan strings (using strings[index]) — Francesco Nardone
– Francesco Nardone, Commented Jun 10, 2020 at 7:17

Dan Knights · Accepted Answer · 2020-06-09 13:03:14Z

1

Try this: v-model="strings[index]"

By doing this you are passing by reference and not by value. Meaning, instead of having two separate instances between strings and your v-model="string" they both share the same instance instead.

edited Jun 9, 2020 at 13:03

answered Jun 9, 2020 at 12:57

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs reactive binding of strings in a array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related