v-for with model vuejs

Question

I need to execute a v-for, however I do not know how to add a v-model for each different component inside of v-for;

<template>
<ProfilePasswordField
      v-for="(item, index) in profilePasswordItems" 
      :key="index"
      :profilePasswordItem="item"
      v-model="???"
>
</template>

This v-for will always be three items and I want to name the v-model's as: ['passaword', 'newPassword', confirmNewPassword']

How can I add those names dinamically for the v-model inside v-for?

I tried to do a list inside data() but it did not work. Something like that:

data (){
        return{
            listPassword: ['passaword', 'newPassword', 'confirmNewPassword']
        }
},
methods: {
        method1 () {
            console.log(this.passaword)
            console.log(this.newPassword)
            console.log(this.confirmNewPassword)
       }
}

Try `profilePasswordItems[index]` or even `item`. Depends on what `profilePasswordItems` actually is. — kissu, Nov 24 '22 at 19:10
Does this answer your question? https://stackoverflow.com/a/74535321/19027584 — Martinez, Nov 24 '22 at 19:34
@kissu, but how can I recover the data when I use profilePasswordItems[index]? I mean, if I use ['passaword', 'newPassword', 'confirmNewPassword'] as a text and your tip, how can I recovery inside a method() the data inside these components created? I can't use something like this.confirmNewPassword, for exemple — João Denari, Nov 24 '22 at 20:08
I am using v-model to pick after the data to use inside methods() — João Denari, Nov 24 '22 at 20:09
@Martinez as far as I know, i can't see if it will help ;) Because your awser is about a button with a function that creates a new component with v-for Mine is a v-for created when the page is loaded. I will look up again to check if I am wrong. Thanks for the help anyway ;) — João Denari, Nov 24 '22 at 20:16

score 2 · Accepted Answer · answered Nov 25 '22 at 07:27

The v-model directives cannot update the iteration variable itself therefore we should not use a linear array item in for-loop as the v-model variable.

There is another method you can try like this-

In the parent component-

<template>
  <div>
    <ProfilePasswordField
      v-for="(item, index) in listPassword" 
      :key="index"
      :profilePasswordItem="item"
      v-model="item.model"
    />
    <button @click="method1()">Click to see changes</button>
 </div>
</template>
    
<script>
  export default {
  name: "SomeParentComponent",

  data() {
    return {
      listPassword: [
        { model: "passaword" },
        { model: "newPassword" },
        { model: "confirmNewPassword" },
      ],
     };
   },
    
   methods: {
     method1() {
       this.listPassword.forEach((item) => {
         console.log(item.model);
       });
     },
   },
  }
 </script>

And in your ProfilePasswordField you can emit the input event to listen to the respected changes in v-model binding. For example, the ProfilePasswordField component could be like this-

<template>
  <v-text-field :value="value" @input="$emit('input', $event)"/>
</template>

<script>
 export default {
   name: "ProfilePasswordField",

   props: {
    value: {
     required: true 
    } 
 }
</script>

In the parent component's console, you should see the changes made by the child component.

Tkanks a lot! Neha. It is working as I wanted. Just a little update for the others who will come, the ProfilePasswordField input must be just like it: @input="$emit('input', $event.target.value)" — João Denari, Nov 25 '22 at 11:21

v-for with model vuejs

1 Answers1