Vue 부트스트랩 - 동적으로 렌더링된 HTML에 대해 툴팁이 작동하지 않음

Vue 부트스트랩 - 동적으로 렌더링된 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>

항목에 마우스를 올려놓으면 툴팁이 작동하지 않습니다.왜 그랬는지, 어떻게 고칠 수 있는지 이해할 수 있게 도와주실 수 있나요?고마워요.

다이내믹 블록을 사용하는 경우 다이내믹 ID가 필요합니다.즉, 가지고 있는 모든 링크에 대해 다른 ID를 가져야 하며 툴팁의 타깃을 작성할 때 동일한 ID를 사용해야 합니다.개인적으로는 항목에 동적 ID가 없는 경우 동적 ID를 만듭니다.

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

이전 게시물이지만 코드에는 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>

based https://bootstrap-vue.js.org/docs/components/tooltip/에서 v-b-http 지시문을 추가해야 합니다.

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

언급URL : https://stackoverflow.com/questions/50406677/vue-bootstrap-tooltip-not-working-for-dynamically-rendered-html