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
– kissu, Commented Nov 24, 2022 at 19:10
Does this answer your question? stackoverflow.com/a/74535321/19027584 — Martinez
– Martinez, Commented Nov 24, 2022 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
– João Denari, Commented Nov 24, 2022 at 20:08
I am using v-model to pick after the data to use inside methods() — João Denari
– João Denari, Commented Nov 24, 2022 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
– João Denari, Commented Nov 24, 2022 at 20:16

Neha Soni · Accepted Answer · 2022-11-25 07:27:13Z

2

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.

answered Nov 25, 2022 at 7:27

Neha Soni

4,7623 gold badges19 silver badges51 bronze badges

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

1 Comment

João Denari Over a year ago

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)"

Collectives™ on Stack Overflow

v-for with model vuejs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related