Vue：为什么只有最后一个对象只关联到 for 循环中的每个模态

Question

这是我第一次使用模态组件。在对象数组的 for 循环中，我还添加了一个模态组件“Add Item”。模态中显示按钮中的 v:onClick="showSectionID" 函数应该只控制台记录打开关联模态的对象的 ID，然后单击它各自的显示按钮。但是，无论我从任何关联模式中单击“显示”按钮，它都会给出最后一个对象的 ID。

为了测试，我删除了整个模式，只保留了 SHOW 按钮，在这种情况下，它给了我正确的 ID。我真的无法弄清楚模态中的 s 出了什么问题，并在互联网上搜索了多个来源以查看类似的解决方案但找不到。见代码：

<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">          
   <h4>Section Name: {{ section["sectionName"] }}</h4>
   <h4>Section Description: {{ section["sectionDescription"] }}</h4>
       <template>
         <div>
           <b-button @click="modalShow = !modalShow">Add Item</b-button>
             <b-modal v-model="modalShow">Fill form to add an item !
           <button v-on:click="showSectionID (section['uuid'])">SHOW</button>                         
             </b-modal>       
         </div>
       </template>
</div>

Answer 1

在您的代码中，您正在为 for 循环中的每个部分创建一个模态组件。
如果您所有的模态框都显示在屏幕上，我不会感到惊讶，但您看到的是最后一个，因为它位于所有其他模态框之上。但这也取决于模态的实现方式。

我建议您将模态模板移到 for 循环之外，并更改您存储在组件数据中的内容，以便您知道要在模态中显示哪个部分。

假设您的 data() 将如下所示：

data() {
    return {
        modalVisible: false,
        modalSectionUUID: null
    }
}

然后你可以创建两个方法来显示和隐藏模态：

methods: {
    showModal(sectionUUID) {
        this.modalVisible = true;
        this.modalSectionUUID = sectionUUID;
    },
    hideModal() {
        this.modalVisible = false;
        this.modalSectionUUID = null;
    }
}

现在，您的模板最终将如下所示：

<b-modal v-model="modalVisible">Fill form to add an item !
    <button v-on:click="showSectionID(modalSectionUUID)">SHOW</button>                         
</b-modal>
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">          
    <h4>Section Name: {{ section["sectionName"] }}</h4>
    <h4>Section Description: {{ section["sectionDescription"] }}</h4>
    <template>
        <div>
            <b-button @click="showModal(section['uuid'])">Add Item</b-button>
        </div>
   </template>
</div>

Vue：为什么只有最后一个对象只关联到 for 循环中的每个模态

Vue: Why only the last object is only associated to every modal which is in for loop

modal-dialog

bootstrap-modal

vue.js