I am facing a challenge where I need to implement a v-for loop with multiple components, but I am unsure how to add a unique v-model to each component that is generated within the loop.
<template>
<ProfilePasswordField
v-for="(item, index) in profilePasswordItems"
:key="index"
:profilePasswordItem="item"
v-model="???"
>
</template>
The v-for loop will always have three items, and I would like to assign the v-model names as: ['password', 'newPassword', 'confirmNewPassword']
Is there a way to dynamically set these v-model names within the v-for loop?
I attempted to create a list inside the data() function, but it was unsuccessful. My attempt looked like this:
data (){
return{
listPassword: ['password', 'newPassword', 'confirmNewPassword']
}
},
methods: {
method1 () {
console.log(this.password)
console.log(this.newPassword)
console.log(this.confirmNewPassword)
}
}