Vue.js中v-for循环内为组件动态绑定不同v-model的方法

你可以通过两种方式实现动态绑定v-model，适配你的需求场景：

方案一：用统一对象管理密码字段（推荐） #

把需要绑定的三个密码字段归类到一个对象中，循环时通过键名动态绑定，代码结构更清晰易维护：

<template>
  <ProfilePasswordField
    v-for="(fieldKey, index) in passwordFieldKeys" 
    :key="index"
    :profilePasswordItem="fieldKey"
    v-model="passwords[fieldKey]"
  />
</template>

<script>
export default {
  data () {
    return {
      passwordFieldKeys: ['password', 'newPassword', 'confirmNewPassword'],
      passwords: {
        password: '',
        newPassword: '',
        confirmNewPassword: ''
      }
    }
  },
  methods: {
    method1 () {
      console.log(this.passwords.password)
      console.log(this.passwords.newPassword)
      console.log(this.passwords.confirmNewPassword)
    }
  }
}
</script>

方案二：直接绑定到实例顶级data属性 #

如果需要保留this.password这类直接挂载的顶级属性结构，可以通过$data访问实例的data对象，动态绑定对应字段：

<template>
  <ProfilePasswordField
    v-for="(fieldKey, index) in passwordFieldKeys" 
    :key="index"
    :profilePasswordItem="fieldKey"
    v-model="$data[fieldKey]"
  />
</template>

<script>
export default {
  data () {
    return {
      passwordFieldKeys: ['password', 'newPassword', 'confirmNewPassword'],
      password: '',
      newPassword: '',
      confirmNewPassword: ''
    }
  },
  methods: {
    method1 () {
      console.log(this.password)
      console.log(this.newPassword)
      console.log(this.confirmNewPassword)
    }
  }
}
</script>

注意事项 #

• 两种方案核心都是通过字段名字符串动态访问响应式属性，Vue会自动处理响应式更新
• 你原代码中存在拼写错误：passaword应改为password，否则会出现属性未定义的错误

内容的提问来源于stack exchange，提问作者João Denari