移除数组最后一项时Bootstrap Modal意外关闭的问题排查

我之前碰到过完全一样的情况！这个问题主要出在**v-for的key使用了index**，再加上Bootstrap和Vue的DOM更新机制之间的小冲突。

问题原因 #

当你把index作为v-for的key时，Vue的虚拟DOM在更新时会复用已有的DOM元素。比如移除最后一项时，Vue会直接删除最后一个按钮元素，但Bootstrap的模态框内部是基于初始DOM结构绑定事件的，这种突然的DOM变动会触发它内部的异常检测逻辑，导致模态框意外关闭。

另外，虽然splice方法本身没问题，但配合index作为key时，会让Vue的DOM更新逻辑出现偏差，间接放大了这个问题。

解决方案 #

1. 使用唯一标识作为v-for的key #

把v-for的key从index改成每个item的唯一属性，比如你数据里的item.index（它本身就是唯一值）：

<button v-for="(item, index) in payload.items" :key="item.index" type="button" class="btn btn-danger" @click="removeItem(index)">
  Remove {{item.name}}{{item.index}}
</button>

这样Vue就能精准识别每个元素，移除时只会销毁对应的按钮，不会触发Bootstrap的误判。

2. 可选：阻止事件冒泡（额外保险） #

如果还是偶尔出现问题，可以在移除按钮的点击事件上阻止事件冒泡，避免事件传递到模态框父元素触发关闭逻辑：

<button v-for="(item, index) in payload.items" :key="item.index" type="button" class="btn btn-danger" @click.stop="removeItem(index)">
  Remove {{item.name}}{{item.index}}
</button>

这里的@click.stop是Vue的事件修饰符，专门用来阻止事件向上冒泡。

修改后的完整验证代码 #

替换App.vue的内容为以下代码，就能正常移除最后一项而不关闭模态框了：

<template>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <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">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <button v-for="(item, index) in payload.items" :key="item.index" type="button" class="btn btn-danger" @click.stop="removeItem(index)">Remove {{item.name}}{{item.index}} </button>
        </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 'bootstrap/scss/bootstrap.scss'
import "bootstrap/dist/js/bootstrap.js";
import {reactive} from "vue";
const payload = reactive({
  items: [
    {index: 0, name: 'Hello',},
    {index: 1, name: 'Hello',},
    {index: 2, name: 'Hello',},
  ],
})
const removeItem = (index) => payload.items.splice(index, 1)
</script>

为什么这样有效？ #

• 唯一key让Vue的DOM更新更精准，不会因为数组长度变化而复用错误元素，避免了Bootstrap对DOM变动的误判。
• 阻止事件冒泡确保点击移除按钮的动作不会被模态框父元素误识别为关闭触发事件。

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