T
T
Tereverda2021-07-06 21:18:43
Bootstrap
Tereverda, 2021-07-06 21:18:43

Bootstrap popup inside vue js?

Separately, the popup window is shown when I enable conditional output inside VUE, the popup window does not work.
link to the page

<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>


and file connection order

<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/[email protected]/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 the question

In order to leave comments, you need to log in

1 answer(s)
A
Aetae, 2021-07-06
@Aetae

Obvious - unbelievable: do one - , there are no elements on the page , do two - for elements ( which do not exist ) activate the possibility of pop-ups, do three - a fresh element appears that does not suspect anything. Don't mix completely different approaches. If you are writing in vue, don't touch anything inside vue from outside. Write in jquery - don't use vue. If you need to use jquery in conjunction with vue - do it not from the outside, but from the inside: create a wrapper component of the type in which you do not activate your . By the way, this was done for you a long time ago in bootstrap-vue . v-if=falsedata-toggle="tooltip"v-if=true

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question