Vue循环中如何为每个input分配唯一v-model参数

你的代码无法正常工作的核心问题在于：

• 你把v-model绑定到了字符串字面量上（item是数组里的字符串），而v-model需要绑定响应式的变量引用
• 普通数组lst里的字符串并不是响应式的存储容器，无法承载输入值的变化

以下是可行的解决方案：

实现思路 #

用一个响应式对象来存储所有输入值，把数组lst里的每个字符串作为对象的属性名，这样每个input的v-model就绑定到对象的对应属性上，既能保证唯一性，也能通过属性名直接访问对应输入值。

完整代码示例 #

<template>
  <div v-for="item in lst" :key="item">
    <input v-model="formData[item]" />
  </div>
</template>

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

// 如果lst需要动态修改，用ref包裹；静态列表可以直接用普通数组
const lst = ref(['first_vmodel_value','second_vmodel_value'])

// 响应式对象，存储所有输入值，初始值可根据需求设置
const formData = reactive({
  first_vmodel_value: '',
  second_vmodel_value: ''
})

// 后续可以通过formData[item]或者直接formData.first_vmodel_value访问输入值
</script>

关键说明 #

1. 响应式对象formData：作为所有输入值的存储容器，每个属性对应lst里的一个项，Vue会自动追踪它的变化，实现双向绑定
2. v-model="formData[item]"：通过属性名的方式绑定，确保每个input对应唯一的存储属性
3. 动态列表处理：如果lst是动态生成或会修改的，一定要用ref包裹，这样Vue才能检测到数组的变化并更新DOM

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