时间戳

首页 > 解决方案 > 将 Quasar Tooltip 添加到使用代码构建的 q-list

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

问题描述

我正在尝试将工具提示添加到通过代码构建的 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

谢谢

标签： javascripthtmlquasar

解决方案

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

推荐阅读