Как сделать модальное окно на nuxt.js через bootstrap api?

Здравствуйте, делаю сайт на nuxt.js
встала задача сделать модальные окна
верстка использует bootstrap5 (import scss)

чтобы подключить js от bootstrap5
нагуглил что нужно создать в папке plugins файл bootstrap.js
туда поместить import * as bootstrap from 'bootstrap/dist/js/bootstrap.esm.min'

если делать модалку или выпадающий список через data-атрбуты bs-....
все работает как надо

но я пишу свой компонент модального окна

там у меня в версте будет кнопка
и сама модалка - все как в доке bootstrap

при клике на кнопку "открыть окно" я хочу ПРОГРАММНО вызвать модалку
ну еще и навесить все колбеки и куча запросов должна произойти и тп - не суть

я не могу воспользоваться Modal api от bootstrap

у меня такой код
<script>
import {Modal} from 'bootstrap/dist/js/bootstrap.esm.min';

export default {
  name: "OrderStatus",
  data() {
    return {}
  },
  methods: {
    click() {
      let myModal = new Modal(document.getElementById('exampleModal'))
      console.log(myModal)
    }
  }
}
</script>


открывая страницу в браузере я вижу
render function or template not defined in component: ...

все ломает строка
import {Modal} from 'bootstrap/dist/js/bootstrap.esm.min';

но если убрать страница открывается, но не работает метод
new Modal(document.getElementById('exampleModal'))
я получаю ошибку
ReferenceError: Modal is not defined (она логичная тк нет импорта и что за MODAL неизветсно)
но почему не работает первый вариант я не могу понять и как сделать чтобы работел

у меня в package.json именно чистый bootstrap
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 1
wapster92
@wapster92
document.getElementById('exampleModal') подозреваю проблема в этом. Я так понимаю ты используешь элемент из виртуального DOM. Повесь на этот элемент ref и передавай его в экземпляр класса.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы