Vue3组合式API+Bootstrap5模态框仅能修改数组首个元素问题

问题根源 #

核心原因是DOM元素ID的唯一性冲突。Bootstrap模态框通过data-bs-target="#exampleModal"绑定触发逻辑，但你在<EditItem>组件中将模态框ID写死为exampleModal。当v-for循环渲染多个子组件时，页面会生成多个ID完全相同的模态框——浏览器查找ID元素时只会返回第一个匹配项，因此无论点击哪个列表项的按钮，打开的都是第一个模态框，自然只能修改首个列表项的数据。

解决方案 #

方案1：为每个模态框生成唯一ID

通过父组件传递item.id，让子组件生成专属的模态框ID，避免冲突：

父组件代码

<div :key="item.id" v-for="item in items">
   <EditItem :item="item" :modal-id="`edit-modal-${item.id}`"/>
</div>

子组件EditItem.vue

<script setup>
defineProps({
  item: {
    type: Object, 
    required: true
  },
  modalId: {
    type: String,
    required: true
  }
})
</script>

<template>
  <!-- 正常编辑区域 -->
  <input type='text' v-model="item.name">
  <div> {{item.name}} </div>

  <!-- 绑定唯一模态框ID的触发按钮 -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" :data-bs-target="`#${modalId}`">
    Edit Item
  </button>

  <!-- 使用唯一ID的模态框 -->
  <div class="modal fade" :id="modalId" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">编辑项目</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="name" class="form-label">Item name</label>
            <input type='text' class="form-control" id="name" placeholder="John Doe" v-model="item.name">
            <div> {{ item.name }} </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>

方案2：将模态框移出循环（更推荐）

只在循环内保留触发按钮，将模态框放在父组件中，通过响应式变量控制当前编辑的项，避免重复渲染模态框：

父组件代码

<template>
  <div :key="item.id" v-for="item in items">
    <input type='text' v-model="item.name">
    <div> {{item.name}} </div>
    <button type="button" class="btn btn-primary" @click="currentEditItem = item" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Edit Item
    </button>
  </div>

  <!-- 全局唯一的模态框 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">编辑项目</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" v-if="currentEditItem">
          <div class="mb-3">
            <label for="name" class="form-label">Item name</label>
            <input type='text' class="form-control" id="name" placeholder="John Doe" v-model="currentEditItem.name">
            <div> {{ currentEditItem.name }} </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([/* 你的列表数据 */])
const currentEditItem = ref(null)
</script>

补充说明 #

• 实际开发中禁止直接修改props，正确做法是在子组件通过defineEmits触发事件，父组件监听事件并修改源数据，维护单向数据流。
• 方案2更高效，仅渲染一个模态框，减少DOM节点数量，从根源上避免ID冲突问题。

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