Что может вызвать сбой компонента popover, когда работают директивы popover

Question

Я пытаюсь использовать всплывающие окна BootstrapVue. Насколько я могу судить, я импортирую все, что мне нужно

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                 crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
           integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 
           crossorigin="anonymous"></script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.7.0/dist/bootstrap-vue.common.min.js"
           integrity="sha256-NTImazhsLEaQ0a59ZMLLxaOfFnKZNLJbbTcZh9YBM58="
           crossorigin="anonymous"></script>

Я могу заставить поповеры работать с

<div id="general-info" class="questionMarkHelp" v-b-popover.hover.bottom="'På denna sida kan du se en sammanställning av statistik för din kommun'">

Но когда я пытаюсь использовать b-popover, это не

<font-awesome-icon id="investigations" icon="question-circle" size="2x"/>
<b-popover target="investigations" placement="bottom" triggers="hover">
           Här kan du statistik över utredningar.<br>
           Du kan se hur många utredningar din kommun har.<br>
           Hur många som är pågående.<br>
           Hur många som ledde till insats.<br>
           Hur många som inte ledde till insats
</b-popover>

Как видите, я бы хотел иметь возможность форматировать текст внутри поповера с помощью тегов
. В противном случае я, вероятно, просто буду доволен использованием директивы типа.

Answer 1

Если вы используете Bootstrap-Vue, вам НЕ нужно импортировать jQuery, popper и bootstrap.js. Вы можете прочитать, что вам нужно импортировать здесь .

Единственное, что вам нужно импортировать из bootstrap, это их CSS / S CSS. (Вы все еще можете импортировать jQuery и popper, если используете их для чего-то другого, но это не обязательно)

Все остальное, что я обрабатывал с помощью Vue speci c компонентов из Bootstrap-Vue.

Ваш код работает нормально, если я не импортирую ненужные файлы, как вы можете видеть ниже во фрагменте. (Я заменил ваш font-awesome-icon компонентом Bootstrap - Vue, это не должно иметь значения).

Еще одна вещь, на которую следует обратить внимание: директива v-b-popover поддерживает модификатор html для форматирования передаваемой строки как HTML.

Редактировать: Похоже, bootstrap-vue.common.min.js не поддерживает компонент b-popover, переключая его на вместо импорта bootstrap-vue.min.js исправлен компонент.

new Vue({
 el: "#app",
 data() {
  return {
    text: "Här kan du statistik över utredningar.<br>Du kan se hur många utredningar din kommun har.<br>Hur många som är pågående.<br>Hur många som ledde till insats.<br>Hur många som inte ledde till insats"
  }
 }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.css"/>

<!-- Import Vue and Bootstrap-Vue Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.js"></script>

<!-- Only imported for this example -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>



<div id="app" class="container">
  <!-- Using the directive with the HTML modifier  -->
  <b-icon v-b-popover.html.hover.bottom="text" icon="question"></b-icon>
  
  <!-- Using the component -->
  <b-icon id="investigations" icon="info"></b-icon>
  <b-popover target="investigations" placement="bottom" triggers="hover">
    <span v-html="text"></span>
  </b-popover>
</div>