Vue 3 组件data函数中projectId传至模态框提交时始终为首个项目ID问题

问题原因 #

你当前遇到的异常核心是模态框ID全局重复：

• 你在循环渲染多个Project组件时，每个Project实例内部的CreateObjectModal都使用了固定的id="createObject"
• Bootstrap的data-bs-target属性只会匹配DOM结构中第一个符合ID的元素，所以无论点击哪个项目的新增按钮，唤起的永远是第一个Project组件对应的模态框实例，自然拿到的始终是第一个项目的ID。

解决方案 #

第一步：为每个模态框分配唯一ID #

修改两个位置的代码：

1. Project组件中新增按钮的data-bs-target改为动态值，和当前项目ID绑定：

<button @click="setProjectId" id="add-object-button" class="btn btn-outline-secondary mt-1 ms-1" data-bs-toggle="modal" :data-bs-target="`#createObject_${project.ID}`">
    <b>Add Data Object</b>
    <i id="plus-icon" class="fas fa-plus"></i>
</button>

2. CreateObjectModal组件中模态框的id改为动态值，和传入的projectId绑定：

<div class="modal fade" :id="`createObject_${projectId}`" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

第二步（可选优化）：emit事件直接携带项目ID #

避免父组件维护projectId状态可能出现的不一致，修改CreateObjectModal的提交逻辑，触发事件时直接把当前projectId回传：

// CreateObjectModal 组件 methods
createObject() {
    this.$emit('add-object', this.objectName, this.projectId)
}

父组件Project的addObject方法直接接收参数即可：

async addObject(objectName, projectId) {
    console.log(objectName, projectId)
    // 后续业务逻辑直接使用传入的projectId即可
}

修改完成后，每个项目的新增按钮都会唤起对应唯一ID的模态框，就能拿到当前点击项目的正确ID了。

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