Vue.js项目中v-for循环使用及输入框值绑定与保留问题

直接通过Vue的属性绑定语法:id，结合循环项的id和输入框的标识（避免同一项内的输入框id重复）来设置即可。

示例代码：

<template>
  <div v-for="item in items" :key="item.id">
    <!-- 四个输入框，id结合循环项id和字段名，保证全局唯一 -->
    <input :id="`${item.id}-field1`" v-model="item.field1" placeholder="字段1">
    <input :id="`${item.id}-field2`" v-model="item.field2" placeholder="字段2">
    <input :id="`${item.id}-field3`" v-model="item.field3" placeholder="字段3">
    <input :id="`${item.id}-field4`" v-model="item.field4" placeholder="字段4">
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 示例数据，每个项包含唯一id和四个字段
const items = ref([
  { id: 1, field1: '', field2: '', field3: '', field4: '' },
  { id: 2, field1: '', field2: '', field3: '', field4: '' }
])
</script>

如果不需要区分同一项内的不同输入框（不推荐，因为id需全局唯一），也可以直接绑定:id="item.id"，但更建议加上字段标识避免冲突。

有两种常用实现方式：

方式1：给循环项添加专属字段 #

直接在每个循环对象里新增一个存储输入值的字段，v-model绑定到这个字段即可：

<template>
  <div v-for="item in items" :key="item.id">
    <input v-model="item.inputValue" placeholder="输入内容">
    <p>当前项输入值：{{ item.inputValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 每个项自带inputValue字段存储输入值
const items = ref([
  { id: 1, name: '项1', inputValue: '' },
  { id: 2, name: '项2', inputValue: '' }
])
</script>

方式2：用独立对象存储输入值 #

如果不想修改原数组的结构，可以声明一个单独的响应式对象，以循环项的id为键来存储对应输入值：

<template>
  <div v-for="item in items" :key="item.id">
    <input v-model="inputValues[item.id]" placeholder="输入内容">
    <p>当前项输入值：{{ inputValues[item.id] || '' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: '项1' },
  { id: 2, name: '项2' }
])
// 用对象存储每个id对应的输入值
const inputValues = ref({})
</script>

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