Vue Bootstrap - всплывающая подсказка не работает для динамически отображаемого HTML

У меня есть группа списка, элементы списка которой отображаются из вызова API. Например,

  {
    "MenuID": "1",
    "Name": "<span v-b-tooltip.hover title=\"Self Help Training\">Help</span>",
    "Url": "example.com"
  }

У меня есть приведенный ниже HTML,

  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-html="link.Name"></a>
    </li>
  </ul>

Подсказка не работает при наведении на элемент. Не могли бы вы помочь мне понять, почему это так и как это можно исправить? Спасибо


vuejs2 bootstrap-4 vue-component bootstrap-vue
person Vishwas    schedule 18.05.2018    source источник
comment
свойство name представляет собой просто текст html и отображается с директивой v-html, таким образом, vue не будет компилировать содержимое   -  person jacky    schedule 18.05.2018
comment
вы можете зарегистрировать компонент с помощью шаблона ‹span v-b-tooltip.hover title=Self Help Training›Help‹/span› и использовать свойства для получения текста всплывающей подсказки и текста заголовка   -  person jacky    schedule 18.05.2018
comment
Отвечает ли это на ваш вопрос? Как добавить подсказку начальной загрузки внутри Vue.js   -  person Maxim Fedotov    schedule 03.03.2020

Ответы (3)


arrow_upward
0
arrow_downward

При использовании динамического блока вам нужны динамические идентификаторы. Это означает, что вы должны иметь разные идентификаторы для каждой имеющейся у вас ссылки и убедиться, что вы используете один и тот же идентификатор при создании цели для своей всплывающей подсказки. Лично я создаю динамический идентификатор, если у элемента его еще нет.

<div>
  <p>{{itemName}}</p>
  <div>
    <img :id="'prod_' + prodId" src="../assets/utility/product.svg">
  </div>
  <b-tooltip :target="'prod_' + prodId" triggers="hover">
    Delete item from the list!
  </b-tooltip>
</div>
person Darius    schedule 11.04.2021

arrow_upward
-1
arrow_downward

Старый пост, но я не вижу v-tooltip в вашем коде.

  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-html="link.Name"></a>
    </li>
  </ul>

Сделайте что-нибудь вроде этого

  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-tooltip="'Your Tooltip message'" v-html="link.Name"></a>
    </li>
  </ul>
person Dustin Cox    schedule 09.12.2020
comment
Подсказка находится в HTML-коде вызова API. Проблема в том, что этот vue не интерпретирует директивы во внедренном html. - person Steve Maris; 10.12.2020
comment
Хорошо, я вижу это как vb-tooltip. Скорее всего, это должно быть связано с тем, как написан ваш код. ‹span v-b-tooltip.hover title=\Обучение самопомощи\›Помощь‹/span›. Похоже, вы пытаетесь передать строку по имени ключа. Вы экранируете строку до обучения самопомощи. Можете попробовать ‹span v-b-tooltip.hover title='Обучение самопомощи'›Help‹/span›. Кроме того, вчера я заработал, выполнив v-tooltip.hove :title=, а не v-b-tooltop. Надеюсь это поможет. - person Dustin Cox; 10.12.2020
comment
- Проблема остается прежней. ‹span ...› — это то, что извлекается API, а не что-то в коде. - Всплывающая подсказка v-b - это всплывающая подсказка начальной загрузки. - Комментарий @jacky - лучший подход. API не должен предоставлять html, только «текст всплывающей подсказки» и «текст содержимого». А затем вы используете эти свойства в компоненте. - person Steve Maris; 10.12.2020

arrow_upward
-2
arrow_downward

на основе https://bootstrap-vue.js.org/docs/components/tooltip/ необходимо добавить директиву v-b-tooltip.

<ul class="list-group list-group-flush">
  <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
     <a :href="link.Url" v-html="link.Name" v-b-tooltip.hover :title="link.Name"></a>
  </li>
</ul>
person reza_daulay    schedule 18.05.2018