v-for with model vuejs

Question

我需要执行一个v-for，但是我不知道如何为v-for内部的每个不同组件添加一个v-model;

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

这个v-for将总是有三个条目，我想将v-model的命名为:[' password '， 'newPassword'， confirmNewPassword']

如何在v-for中动态地为v-model添加这些名称?

我试图在data()中做一个列表，但它没有工作。像这样:

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

Answer 1

v-model指令不能更新迭代变量本身，因此我们不应该在for循环中使用线性数组项作为v-model变量。

还有一个方法你可以试试，像这样-

在父组件-

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

在你的ProfilePasswordField中，你可以发出输入事件来监听v-model绑定中受尊重的变化。例如，ProfilePasswordField组件可以像这样:

<template>
<v-text-field :value="value" @input="$emit('input', $event)"/>
</template>
<script>
export default {
name: "ProfilePasswordField",
props: {
value: {
required: true 
} 
}
</script>

在父组件的控制台中，您应该看到子组件所做的更改。