本文详解 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）动态访问其属性。以下是优化后的完整实现：

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

// 使用 ref 包裹普通对象，使其成为响应式（也可用 reactive，但需注意解构丢失响应性）
const data = ref({ 'test1': 'val1', 'test2': 'val2' })

function submitTest(value) {
  // 此处 value 是当前输入框绑定的实际值（字符串），已是最新的
  alert(`当前值：${value}`)
}

function submitByKey(key) {
  // 若需通过 key 获取最新值（例如用于表单提交逻辑）
  alert(`键 "${key}" 对应的值：${data.value[key]}`)
}
</script>

<template>
  <div v-for="(value, key) in data" :key="key">
    <!-- ✅ 正确绑定：v-model="data[key]" → 动态响应式路径 -->
    <input :id="key" v-model="data[key]" />
    <!-- 两种调用方式均可 -->
    <button @click="submitTest(value)">获取当前值</button>
    <button @click="submitByKey(key)">通过 key 获取值</button>
  </div>
</template>

? 关键要点说明：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

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

? 进阶提示：对于复杂表单，建议使用 toRefs 或 computed 构建独立响应式字段，或直接采用 useForm 类组合式函数提升可维护性。但对基础动态绑定场景，上述 ref + data[key] 方案简洁、可靠、零依赖。

立即学习“前端免费学习笔记（深入）”；