Vue 3通过参数动态访问v-model值

本文详解 Vue 3 Composition API 下如何正确通过循环参数（如 key）访问并修改响应式对象中对应字段的 v-model 值，避免将原始字符串误作响应式引用，并提供可运行示例与关键注意事项。

在 Vue 3 中，使用 v-model 绑定时，实际绑定的是响应式数据的引用路径，而非静态值副本。许多开发者容易在此处踩坑——当使用 v-for 循环时，获取到的是对象的值（例如 'val1'），而非响应式引用本身，从而导致双向绑定失效。常见的错误写法包括：

• v-for="(item, idx) in data" 中的 item 仅为原始值，不是响应式对象；
• 直接写 :v-model="item" 语法错误（v-model 无需冒号），且 item 为只读字符串，无法实现双向绑定；
• 调用 submitTest(item) 时传入的也是值本身，方法中无法通过 .value 访问到响应式属性。

正确的做法是：保持对响应式对象的引用，然后使用键名（key）动态访问其属性。以下是一段可直接运行的示例代码：

关键要点说明

• v-model 必须绑定到可写入的响应式引用路径（如 data[key]），而非临时变量 item；
• ref({}) 是推荐方式——它确保整个对象及其嵌套属性在变更时触发更新（reactive({}) 同样可行，但若后续需将 data 解构使用，ref 更安全）；
• :key="key" 是 v-for 必需项，避免渲染异常；
• 若需在方法中动态读取某字段最新值，始终通过 data.value[key] 访问，而非依赖传参（因为参数可能滞后于视图更新）。

进阶提示

对于复杂表单，建议使用 toRefs 或 computed 构建独立响应式字段，或者直接采用 useForm 这类组合式函数来提升可维护性。不过，对基础动态绑定场景来说，上述 ref + data[key] 的方案已经足够简洁、可靠，且零依赖。