Vue中如何通过参数获取v-model绑定的值？

你的代码存在两个核心问题：

1. 遍历对象的方式错误：v-for遍历对象时，(item, idx) 里的item是对象的值（比如'val1'），而非键，把静态字符串绑定到v-model，输入框的修改不会同步到原数据。
2. 数据非响应式：直接声明的var data不是Vue的响应式数据，输入框修改后数据不会更新，自然拿不到最新值。

<template>
  <div v-for="(value, key) in data" :key="key">
    <input :id="key" v-model="data[key]"></input>
    <button @click="submitTest(key)"> testbtn </button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
// 用reactive创建响应式对象
const data = reactive({'test1': 'val1', 'test2': 'val2'})

function submitTest(key){
  // 通过键获取响应式对象里的最新值
  alert(data[key])
}
</script>

• 使用reactive将普通对象转为Vue响应式数据，确保输入框修改能同步更新数据。
• v-for遍历对象时，改为(value, key)获取对象的键（test1、test2），通过data[key]绑定v-model，让输入框的修改直接同步到响应式对象的对应属性。
• 点击按钮时传入对象的键，在submitTest里通过键直接从响应式data中获取最新值。

内容的提问来源于stack exchange，提问作者charle