@Tereverda

Всплывающее окно bootstrap внутри vue js?

Отдельно всплывающее окно отображается, когда включаю вывод по условию внутри VUE всплывающее окно не работает.
Ссылка на страницу

<td>
    <span v-if="box.fefco == '0201'" data-toggle="tooltip" data-html="true" data-title="<img class='d-block m-1 mx auto' 
    src='/img/0201.jpg'>">Fefco 0201 — четырехклапанная</span>
  </td>


и порядок подключения файлов

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- Включаем всплывающие подсказки -->
<script>
  $(function() {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Очевидное - невероятное: делаем раз - v-if=false, на странице нет никаких элементов, делаем два - для data-toggle="tooltip" элементов(которых нет) активируем возможность всплывашек, делаем три - v-if=true появляется свежий элемент который ни о чём не подозревает.

Не мешайте в кучу совершенно разные подходы. Если пишете на vue - не трогайте ничего внутри vue извне. Пишите на jquery - не приплетайте vue. Если вам кровь из носу надо использовать jquery совместно с vue - делайте это не извне, а изнутри: создайте компонент-обёртку типа b-tooltip в котором на mounted активируйте ваш jquery.tooltip().
Кстати за вас это давно сделано в bootstrap-vue.
Ответ написан
Ваш ответ на вопрос

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

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