如何在 Vue 3 中通过参数动态访问 v-model 绑定的响应式数据值

老辰小哥_6659

老辰小哥_6659

2026-07-09

421人浏览

原创

如何在 Vue 3 中通过参数动态访问 v-model 绑定的响应式数据值

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

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

在 Vue 3 中,v-model 绑定的是响应式数据的引用路径,而非原始值副本。你最初代码的问题在于:

  • v-for="(item, idx) in data" 中的 item 是对象的值(如 'val1'),而非响应式引用;
  • :v-model="item" 写法错误(应为 v-model,无冒号),且 item 是只读字符串,无法双向绑定;
  • submitTest(item) 传入的是值本身,自然无法通过 .value 访问响应式属性。

✅ 正确做法是:保持对响应式对象的引用,并通过键名(key)动态访问其属性。以下是优化后的完整实现:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习