v-for与模型vuejs

Question

我需要执行一个v- for，但是我不知道如何为v-for中的每个不同组件添加一个v-模型；

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

这个v-for将永远是三项，我想将v-模型命名为：'passaword'，'newPassword'，confirmNewPassword‘

我如何为v-for中的v-模型添加这些名称？

我试图在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>

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