How do I have dynamic v-model?

Let’s say I have a multi-step sign up form, user will have to put in their name, and then on the next step their email.
I want to make the input reusable, so I’ll have an array like this

formFields = ['name', 'email']

and an index to identity which step I’m currently at

index = 0

On the view, it’ll be something like

<input v-model="formFields[index]" />

and a next button to update the index.

However, it’s not working. This is my codepen link , in the form, it will just show the ‘name’ text and changing it doesn’t trigger anything.

How can I get it working?

Like this?

You have name and email as normal strings but also in your array. You’re pointing to different values in your example.

I initially thought that if I do it like that

<input v-model="formFields[index]" />

it will turn into

<input v-model="name" />

I didn’t know it’s actually referencing the value in the array rather than the “name” in data.

Thanks a lot for the help!

Glad to help :slight_smile:

You are indeed referencing the values in your array so you can safely delete the first 2 strings.

Thanks @Gerche
This work perfectly well for me a too.
It seems obvious but I spent good couple of hours trying to figure it out by combining v-bind with v-model, which was, obviously, not working