如何在 Vue 中通过参数访问 v-model 绑定的响应式数据值-html教程-PHP中文网

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

本文详解如何在 vue 3 composition api 中正确通过传参方式获取 v-model 绑定的响应式字段值，避免将原始字符串误当作响应式引用，并提供可直接运行的 ref + v-for 实践方案。

本文详解如何在 vue 3 composition api 中正确通过传参方式获取 v-model 绑定的响应式字段值，避免将原始字符串误当作响应式引用，并提供可直接运行的 ref + v-for 实践方案。

在 Vue 中，v-model 并非简单地“绑定字符串”，而是建立对响应式数据属性的双向引用。初学者常误以为中的 item 是一个可被直接修改的变量，但实际上：若 item 是解构后的普通字符串（如 v-for="(item, idx) in data" 中的 item），它只是当前迭代值的副本，不具备响应式连接能力，也无法通过 item.value 访问绑定源。

要实现“点击按钮时获取对应输入框的实时 v-model 值”，关键在于：必须保留对响应式源对象属性的引用路径，而非传递已解构的值。

以下为推荐且可靠的实现方式：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

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

// 使用 ref 包裹对象，确保其响应性
const data = ref({ 'test1': 'val1', 'test2': 'val2' })

function submitTest(key) {
  // key 是属性名（如 'test1'），通过 data[key] 动态访问响应式属性
  alert(`当前值: ${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]"><!-- 点击时传入 key（属性名），而非 value（当前值） --><button>testbtn</button>
  </div>
</template>

✅ 正确要点解析：

data 必须是 ref（或 reactive）包装的响应式对象，否则 v-model="data[key]" 不会触发更新；
v-for 中 (value, key) in data 的 key 是属性名（如 'test1'），它是访问源数据的安全路径标识；
v-model="data[key]" 实质是语法糖，等价于 :modelValue="data[key]" @update:modelValue="val => data.value[key] = val"，因此能双向同步；
submitTest(key) 接收的是键名，再通过 data.value[key] 获取最新值，确保获取的是响应式源数据，而非历史快照。

⚠️ 注意事项：