使用带有Vue v-for的引导工具提示

mm9b1k5b 于 2023-01-21 发布在 Vue.js

关注(0)|答案(1)|浏览(133)

我想在从Vue v-for创建的每个IMG标签中添加引导工具提示，但一旦使用v-for，工具提示就不再工作。
如果没有v-for-

<img src="warning.png" width="40px" heigh="40px" data-toggle="tooltip" title="Some tooltip text!">

一旦使用v-for，它就停止工作了-

<img v-for="item,idx in EQP_USER_NOW" src="warning.png" width="40px" heigh="40px"
  data-toggle="tooltip" title="Some tooltip text!" v-bind:id="idx"></img>

我刚发现问题是在我修改Vue data（在我的情况下为EQP_USER_NOW）后发生的
例如，点击下面的按钮（修改数据）后，数据发生变化，但新的IMG标签不适用于tootip。
一个二个一个一个

vue.js

来源：https://stackoverflow.com/questions/75155124/using-bootstrap-tooltip-with-vue-v-for

1条答案

按热度按时间

cx6n0qe31#

尝试做以下小修复-

IMG是一个自关闭标记，请不要手动关闭它。
1.使用for循环时，建议使用key属性。
1.最佳实践是使用圆括号将多个参数括起来，如(item, idx)。
最后，将代码替换为-

<img
  v-for="(item, idx) in EQP_USER_NOW"
  :key="idx"
  src="https://picsum.photos/200/300"
  width="40px"
  heigh="40px"
  data-toggle="tooltip"
  title="Some tooltip text!"
  v-bind:id="idx"
>

赞(0）回复(0）举报 2023-01-21

我来回答

使用带有Vue v-for的引导工具提示

1条答案

相关问题

热门标签

最新问答