如何将响应式键作为值传递给v-for生成的v-model？

原代码的核心问题 #

1. 你在inputFields里直接存储registerData.name这类原始值，而非属性引用——因为字符串是原始类型，这里存的是值的副本，输入框修改时只会改动副本，无法同步到registerData。
2. 模板中使用:v-model是错误写法，v-model是Vue指令，不需要加绑定冒号。

正确实现方式 #

通过在inputFields中存储registerData的属性名，再通过属性名访问响应式对象的属性，就能实现正确的双向绑定：

<script setup>
import { reactive } from 'vue'

const registerData = reactive({
  name: "",
  surname: "",
  email: "",
  password: ""
});

// 存储registerData的属性key，而非直接存属性值
const inputFields = [
  {
    id: 'name',
    type: 'text',
    propKey: 'name'
  },
  {
    id: 'surname',
    type: 'text',
    propKey: 'surname'
  },
  {
    id: 'email',
    type: 'email',
    propKey: 'email'
  },
  {
    id: 'password',
    type: 'password',
    propKey: 'password'
  }
]
</script>

<template>
  <div v-for="input in inputFields" :key="input.id">
    <input
      :id="input.id"
      :type="input.type"
      v-model="registerData[input.propKey]"
    />
  </div>
</template>

扩展优化（可选） #

如果需要添加标签、占位符等额外配置，直接在inputFields中扩展字段即可：

const inputFields = [
  {
    id: 'name',
    type: 'text',
    propKey: 'name',
    label: '姓名',
    placeholder: '请输入姓名'
  },
  // 其他字段...
]

模板对应修改：

<template>
  <div v-for="input in inputFields" :key="input.id" class="input-group">
    <label :for="input.id">{{ input.label }}</label>
    <input
      :id="input.id"
      :type="input.type"
      :placeholder="input.placeholder"
      v-model="registerData[input.propKey]"
    />
  </div>
</template>

内容的提问来源于stack exchange，提问作者Mehmet Ali KOÇAL