#vue.js #modal-dialog #bootstrap-modal
Вопрос:
Это первый раз, когда я использую модальный компонент. Внутри цикла 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>
Ответ №1:
В своем коде вы создаете модальный компонент для каждого раздела в цикле 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>