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

Question

[Tereverda]

Отдельно всплывающее окно отображается, когда включаю вывод по условию внутри 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>

Answer 1

[Aetae]

Очевидное - невероятное: делаем раз - v-if=false, на странице нет никаких элементов, делаем два - для data-toggle="tooltip" элементов(которых нет) активируем возможность всплывашек, делаем три - v-if=true появляется свежий элемент который ни о чём не подозревает.

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

Comments

[Tereverda]

логику вроде бы понял, но не понял, как это обернуть, есть первый sapn c v-if нужно внутрь сразу в этом span cделать второй?

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

[Aetae]

Tereverda, шо? Нет.
BTooltip.vue(примерно, не проверял):

<template>
  <span data-toggle="tooltip" v-on="$listeners" v-bind="$attrs">
    <slot/>
  </span>
</template>

<script>
  export default {
    mounted() {
      $(this.$el).tooltip()
    }
  }
</script>

Твой компонент:

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