Vue3动态创建图片URL输入框：输入内容同步变化问题排查

问题描述 #

在表单中设置了支持多输入的图片URL字段，通过动态方式创建输入框，但输入其中一个框内容时，其他输入框内容会同步变化。

问题图示：多个输入框内容同步更新，输入任意一个框的内容，其余框会显示相同内容

相关代码：

<script setup>
const items = ref([])
let ids = items.value.length + 1

const addRow = () => {
  const i = Math.round(Math.random() * items.value.length)
  items.value.splice(i, 0, ids++)
}
</script>
<template>
<div>
        <InputLabel for="url" value="URL da imagem" />
        <div>
          <TextInput id="url" v-model="form.url" type="url" required />
            <button type="button" @click="addRow">
              +
            </button>
        </div>
      </div>

      <div  v-for="(item, index) in items" :key="item">
        <InputLabel for="url" value="URL da imagem" />
        <div>
          <TextInput :id="index + 1" v-model="form.url" type="url" required />
          <div class="flex justify-start">
              <button type="button" @click="addRow">
                +
              </button>
              <button type="button" @click="removeField">
                -
              </button>
          </div>
        </div>
      </div>
</div>
</template>

错误原因 #

1. 绑定变量复用：所有输入框的v-model都绑定了同一个form.url单值变量，所有输入框共享同一数据源，修改任意一个都会同步到其他输入框。
2. 输入框逻辑重复：初始输入框与动态生成的输入框功能重叠，且未统一纳入动态管理。
3. 移除方法缺失：removeField方法未定义，无法执行删除输入框的操作。
4. 标识绑定不规范：标签的for属性固定为url，与动态输入框的id不匹配，导致标签和输入框关联错误。

解决方案 #

1. 将form.url改为数组类型，每个输入框对应数组中的独立元素。
2. 统一初始输入框与动态输入框的管理逻辑，用数组初始值生成第一个输入框。
3. 实现removeField方法，支持删除指定索引的输入框，同时限制至少保留一个输入框。
4. 修正标签for属性与输入框id的绑定，确保一一对应。

修改后的代码 #

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

// 用数组存储多个URL，初始包含一个空值对应第一个输入框
const form = ref({ urls: [''] })

// 添加新输入框，在数组末尾追加空值
const addRow = () => {
  form.value.urls.push('')
}

// 删除指定索引的输入框，至少保留一个
const removeField = (index) => {
  if (form.value.urls.length > 1) {
    form.value.urls.splice(index, 1)
  }
}
</script>
<template>
<div>
  <div v-for="(url, index) in form.urls" :key="index">
    <InputLabel :for="`url-${index}`" value="URL da imagem" />
    <div>
      <TextInput 
        :id="`url-${index}`" 
        v-model="form.urls[index]" 
        type="url" 
        required 
      />
      <div class="flex justify-start">
        <button type="button" @click="addRow">+</button>
        <button type="button" @click="removeField(index)" :disabled="form.urls.length === 1">-</button>
      </div>
    </div>
  </div>
</div>
</template>

说明 #

• 每个输入框绑定到form.urls数组的对应索引元素，拥有独立数据源，不会互相干扰。
• 初始输入框通过数组初始值生成，无需编写重复代码。
• 移除按钮添加禁用逻辑，确保表单至少保留一个图片URL输入框。
• 输入框id和标签for属性使用url-${index}格式，保证唯一且关联正确。

内容的提问来源于stack exchange，提问作者João Mello