在 vue 中使用 v-for 渲染多个表单输入项时，需通过 reactive 对象动态创建与每个 item 对应的响应式字段，从而实现每个 input 独立绑定、独立读写。直接用字符串数组元素作为 v-model 目标无效，必须借助响应式对象的属性访问机制。
在 vue 中使用 v-for 渲染多个表单输入项时，需通过 reactive 对象动态创建与每个 item 对应的响应式字段，从而实现每个 input 独立绑定、独立读写。直接用字符串数组元素作为 v-model 目标无效，必须借助响应式对象的属性访问机制。
在 Vue 3 的组合式 API（<script setup>）中，v-model 绑定的目标必须是一个可响应式的变量或对象属性。而你原始代码中 <input :v-model="item"> 存在两个关键错误：
- 错误地使用了 :v-model（即 v-bind:v-model），应直接写 v-model；
- item 是一个字符串字面量（如 'first_vmodel_value'），不是响应式引用，无法双向绑定——v-model 需要能读取和赋值的响应式路径（如 models[item]）。
✅ 正确做法是：用 reactive 创建一个响应式对象，以列表项为 key 动态初始化字段。例如：
<script setup>
import { reactive } from 'vue'
const lst = ['first_vmodel_value', 'second_vmodel_value', 'third_vmodel_value']
// 创建空响应式对象，并为每个 item 初始化为空字符串
const models = reactive({})
lst.forEach(key => {
models[key] = ''
})
</script>
<template>
<div v-for="item in lst" :key="item">
<label>{{ item }}:</label>
<input v-model="models[item]" />
</div>
<!-- 可选：实时查看绑定结果 -->
<pre>{{ models }}</pre>
</template>? 注意：:key="item" 中的 item 必须是唯一且稳定的值（如本例中的字符串本身），避免重复 key 导致 DOM 复用异常。
? 更推荐的进阶写法（更可控、类型友好）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
<script setup>
import { reactive } from 'vue'
const models = reactive({
first_vmodel_value: '',
second_vmodel_value: '',
third_vmodel_value: ''
})
// 若字段名来自后端或配置，也可用 Object.fromEntries() 构建
// const fieldNames = ['a', 'b', 'c']
// const models = reactive(Object.fromEntries(fieldNames.map(k => [k, ''])))
</script>
<template>
<div v-for="key in Object.keys(models)" :key="key">
<label>{{ key }}:</label>
<input v-model="models[key]" />
</div>
</template>? 补充说明：
- 不要使用 ref() 包裹整个数组来尝试“绑定数组元素”，因为 v-model 无法对数组索引（如 lst[0]）进行响应式赋值；
- 若需校验或处理每个字段变化，可在 watch 中监听 models 的深层变化：
watch(models, (newVal) => { console.log('所有字段已更新:', newVal) }, { deep: true }) - 在 TypeScript 项目中，建议为 models 显式定义接口，提升类型安全性和开发体验。
通过这种方式，你不仅能为每个 input 分配唯一且可追踪的 v-model，还能轻松获取、重置或校验任意字段值——真正实现动态表单的响应式管理。
