将 Quasar Tooltip 添加到使用代码构建的 q-list

Question

我正在尝试向通过代码构建的 q-list 添加工具提示

      <q-list bordered>
    <q-item v-for="item in iCite_Data" :key="item.id"   v-ripple>
      <q-item-section>       
      <q-item-label > 
             {{ item.label }}               
       </q-item-label> 
    </q-item-section>
    <q-item-section side> 
       <q-item-label>{{ item.value }}</q-item-label>         
    </q-item-section>
  </q-item>

我试过测试

  <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
     {{ item.tooltip}}
    </q-tooltip>

更新：当我将工具提示添加到硬编码的 q-item 时，它起作用了。

https://codepen.io/morgenweck/pen/VwprbrY?editors=1010

但是如果我尝试添加到从代码构建的 q-item，它不会。有人能指出我正确的方向吗？

这是来自代码的基本 Quasar codepen。

https://codepen.io/morgenweck/pen/VwpMNOO

谢谢

Answer 1

您必须将静态文本 Some text as content of Tooltip 替换为插值 {{ contact.tooltip }} - 您将看到动态工具提示。

将 Quasar Tooltip 添加到使用代码构建的 q-list

Add Quasar Tooltip to a q-list that is built with code

javascript

html

quasar