v-model isn't recognized when used within a v-for loop

97 views Asked by At

I am trying to use the TextField component multiple times to create a form for the user to see/update his personal information (last name, first name...)

In order to not repeat myself I used v-for like so:

<TextField v-for="item in items" v-model="item.value" :text="item.text" :key="item.id" />

And my data look like this:

data: () => ({
   items: [
       {id: "first_name", text: "First Name", value: ""},
       {id: "last_name", text: "Last Name", value: ""},
   ]
})

However, whenever I type anything in one of those TextField the data isn't updated and the value stays as an empty string...

If I write my TextField like so:

<TextField v-model="first_name" text="First Name" />
<TextField v-model="last_name" text="Last Name" />

And my data like so:

data: () => ({
   last_name: "",
   first_name: "",
})

Then is does work...

As you can imagine, I have more than two fields and I need to be able to use the v-for loop.

NOTE: It used to work fine with Nativescript 6, but I had to change everything to Nativescript 7 because the app crashed since the latest version of iOS (14).

0

There are 0 answers