@vlog

Vue: почему при при запуске из одного места функция работает, а при запуске из другого — нет?

Всем доброго вечера!
Есть программа учёта аренд.
На странице выводится список аренд, при нажатии на кнопку "завершить" отображается модальное окно оплаты.
Также отобразить окно оплаты можно отсканировав штрих-код. Соответственно за отображение окна оплаты отвечает одна функция.
Она вызывается из кнопки и из функции-обработчика события сканирования штрих-кода, в неё передаётся экземпляр объекта аренды.

После загрузки страницы всё прекрасно работает - как и должно быть.
На странице организовано меню с помощью Inertia Link.
Так вот после перехода с помощью этого меню на другую страницу и возврата обратно перестаёт открываться модальное окно при сканировании штрих-кода.
При этом в логах ошибок нет, выводится информация о том, что вызвана функция обработчика сканера штрих-кода, определён нужный объект, который передан в функцию открытия модального окна, переменная v-show для модального окна также выводится в лог со значением true, но окно так и не отображается (то есть в логах всё так, будто всё работает в норме). В то время, как при клике по кнопке в логах всё тоже самое, но окно работает.
Если в этот момент обновить страницу на нужной вкладке, то всё снова работает.

Почему так может происходить?

Модальное окно взял отсюда. Единственное, что вместо объявления через ref свойство isOpen объявил через data.

// Обработчик события считывания штрих-кода
EventBarCode(Data) {
            // Считанный штрихкод
            let TextBarcode = Data.BarCode;
            // Номер устройства - сканера
            let NumDevice = Data.NumDevice;
            // Пользовательское имя сканера
            let UnitName = Data.UnitName;
            // Если обработчиков много то сообщаем что Штрихкод обработан и следующие обработчики не вызывать
            Data.AlreadyProcessed = true;
            console.debug('Сосканировано: '+TextBarcode);
            let url = new URL(TextBarcode); // Изначально QR - это ссылка, из которой вычленяем ID
            let id = url.pathname.slice(1);
            let index = this.inrent.findIndex(el => el.id == id);
            console.debug('Вычислен индекс: '+index);
            this.openMainModal(this.inrent[index]);
        },
// Функция открытия модального окна
openMainModal(rent){
            console.debug('Открытие модального окна');
            this.mainForm.id = rent.id;
            this.mainForm.fullname = rent.client.full_name;
            this.selfRent = rent;
            this.mainForm.convert = rent.deposit;
            this.getReceipt(rent.id);
            this.mainForm.isOpen = true;
            this.mainForm.hasDeposit = rent.deposits !== null;
            console.log(rent);
            console.log(this.mainForm.hasDeposit);
            console.debug('Состояние модального окна: '+this.mainForm.isOpen);
        },
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 2
Geminix
@Geminix
Фуллстек nuxt, .net разработчик
Попробуйте isOpen положить в новое computed свойство, и это свойство указать в модальном окне.
computed: {
    showModal: function () {
      return this.mainForm.isOpen
    }
  }
Ответ написан
Комментировать
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
Так вот после перехода с помощью этого меню на другую страницу и возврата обратно перестаёт открываться модальное окно при сканировании штрих-кода.

если модальное окно и/или форма находятся в блоке контент которого изменяется при переходе по ссылке, то при обновлении удалится весь предыдущий код блока и все обработчики которые висят на элементах внутри него
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы