Блог

Это первый раз, когда я использую модальный компонент. Внутри цикла for массива объектов я также добавил модальный компонент «Добавить элемент». Функция v:onClick=»showSectionID» в кнопке «ПОКАЗАТЬ» в модальном режиме должна просто ввести идентификатор объекта, с которым был открыт связанный модальный, и нажать соответствующую кнопку «ПОКАЗАТЬ». Но вместо этого он выдает идентификатор последнего объекта везде, где я нажимаю кнопку «ПОКАЗАТЬ» из любого из связанных модалов.

Просто для проверки я удалил весь модал и сохранил только кнопку «ПОКАЗАТЬ», и в этом случае она дает мне правильный идентификатор. Я действительно не могу понять, что 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>
 

В своем коде вы создаете модальный компонент для каждого раздела в цикле for.
Я не удивлюсь, если на самом деле все ваши модалы появятся на экране, но вы видите последний, потому что он находится поверх всех остальных. Но это также зависит от того, как реализован модальный.

Я предлагаю вам переместить модальный шаблон за пределы цикла for и изменить то, что вы храните в данных компонента, чтобы вы знали, какой раздел показывать в модальном.

Допустим, ваши данные() будут выглядеть следующим образом:

 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>