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

Question

This is the first time I am using modal component. Inside a for loop of an array of objects, I also added a modal component, "Add Item". The v:onClick="showSectionID" function in the SHOW button within the modal should just consolelog the id of the object who's associated modal was opened and click it's respective SHOW button. But instead it is giving the id of the last object wherever I click the SHOW button from any of associated modals.

Just to test, I removed the whole modal and only kept the SHOW button and in this case it gives me the correct id. I really cannot figure out what s is wrong in the modal and searched several sources in the internet to see a similar solution but couldn't find. See code:

<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

In your code, you are creating a modal component for each section within the for loop.
I wouldn't be surprised if actually all your modals show up on the screen, but you see the last one because it's on top of all the other ones. But it also depends on how the modal is implemented.

I suggest you to move the modal template outside your for loop and change what you store in your component data so that you know which section to show in the modal.

Let's say your data() will look like this:

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

Then you can create two methods to show and hide the modal:

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

Now, your template will finally look something like this:

<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>