Vue3中通过参数动态访问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] 的方案已经足够简洁且可靠，且无需额外依赖。