Кнопка ОК не работает нормально в модальном режиме в Vue Js

Question

Обзор: Когда я нажимаю tra sh -can для вышеупомянутого списка (проверьте прикрепленное изображение), появляются два модальных диалоговых окна (так как есть два списка, но должен появиться только один) и после нажатия на OK (для изменения статус первого списка) статус второго изменяется, и диалоговое окно скрывается при вызове функции скрытия. Итак, чтобы удалить первый список, сначала мне нужно пересечь первое модальное окно, а затем мне нужно нажать OK, чтобы изменить статус первого списка.

Кажется, независимо от того, какой tra sh я могу щелкните поле Modal для отображения последнего списка. например, если есть десять списков, и я нажимаю tra sh -can первого списка, появится модальное окно десятого списка и выполнит действие с ним.

  Werkzeugbedarf löschen      Transportbedarfnr.  Muss eine Nummer sein  Мусс мин. {{$ v.form.TransportDemandsId. $ params.minLength.min}} Зален хабен  Muss макс. {{$ v.form.TransportDemandsId. $ params.maxLength.max}} Зален хабен   «Цюрюк  Удалить » Пожалуйста подтвердите Вы уверены, что хотите удалить это?  хорошо Отмена    import ax ios from «ax ios»; import {required, minLength, numeri c, decimal, maxLength} из 'vuelidate / lib / validators' экспорт по умолчанию {name: 'DeleteForm', data () {return {form: {// validation der werte TransportDemandsId: '' ,},}}, проверки: {// проверка формы: {TransportDemandsId: {minLength: minLength (1), maxLength: maxLength (6), numeric},}}, методы: {okButtonClicked: asyn c function () {пусть td_id = this.form.TransportDemandsId; console.log (this.form.TransportDemandsId); let url = "https://localhost: 44370 / api / transportdemand / abort /" + td_id; const res = ожидание ax ios .delete (url); пусть данные = res.data; if (data === true) {alert ("Ответ: ОК. Запрос на транспорт удален:"); } else {alert ("Ответ: запрос на транспорт не найден"); }; this. $ bvModal.hide ('модальный-1'); console.log («кнопка скрытия»); }}}  

Answer 1

Причина, по которой это происходит, заключается в том, что вы определили несколько b-modal id="modal-1". Если у вас есть несколько DeleteForm компонентов в списке, то в качестве вывода вы будете иметь несколько b-modal id="modal-1", поскольку они являются частью компонента DeleteForm. Затем, когда вы запустите $bvModal.show('modal-1'), он откроет модальный для каждого модального окна, определенного с этим идентификатором. Чтобы избежать такой ситуации, вам нужно будет создать новый компонент для модального окна, и вы не должны повторять его. Второй вариант - создать уникальный идентификатор для каждого модального окна внутри DeleteForm. Вы можете, например, передать какой-то идентификатор в качестве реквизита. Надеюсь, что достаточно хорошо описал:)