Vuetify的新功能:尝试将v-tooltip添加到动态输出中

Question

我们有一个警报数组(item.activeAlarms[])，如果有一个活动警报，我们希望能够看到fullName (item.activeAlarms[].fullName)当我们悬停在v-chip。如果没有警报，则会显示"无警报"的工具提示。

<template v-slot:[`item.activeAlarms`]="{ item }">
<v-chip small label color="warning" v-if="item.activeAlarms.length > 0">
<v-icon small left>mdi-alert-outline</v-icon>
{{ item.activeAlarms.length }}
</v-chip>
<v-chip label small dark color="light-green" v-else>
<v-icon small left>mdi-check</v-icon> Keine
</v-chip>
</template>

问题是当我们按照建议添加v-tooltip (https://vuetifyjs.com/en/components/tooltips/#api)时，它最终显示给我们"[object object]，[object object]"在v-data表中，而不是在"活动"中芯片状态和以前一样

<template v-slot:[`item.activeAlarms`]="{ item }">
<v-tooltip v-if="item.activeAlarms.length > 0" color="warning" bottom lazy>
<template>                  
<v-chip v-on="item" small label color="warning" @click="">
<v-icon small left>mdi-alert-outline</v-icon>
{{ item.activeAlarms.length }}
</v-chip>
</template>
<span>Warning Tooltip</span>
</v-tooltip>
<v-tooltip v-else color="success" bottom lazy>
<template>                  
<v-chip label small dark color="light-green">
<v-icon small left>mdi-check</v-icon> Keine
</v-chip>
</template>
<span>No Alarm</span>
</v-tooltip>
</template> 

一个有效的硬编码静态方式看起来像这样:

<v-tooltip bottom color="success">
<template v-slot:activator="{ on, attrs }">
<v-chip color="success" dark v-bind="attrs" v-on="on">
No Alarms
</v-chip>
</template>
<span>No alarms for this system</span>
</v-tooltip>
<v-tooltip bottom color="warning">
<template v-slot:activator="{ on, attrs }">
<v-chip color="warning" dark v-bind="attrs" v-on="on">
<v-icon small left>mdi-alert-outline</v-icon>
2
</v-chip>
</template>
<span>Alarm: xxxx on this system</span>
</v-tooltip>

希望有人能帮助我们:-)

Answer 1

经过反复试验，我终于解决了这个小问题

<template v-slot:[`item.activeAlarms`]="{ item }">
<v-tooltip v-if="item.activeAlarms.length > 0" bottom color="warning">
<template v-slot:activator="{ on, attrs }">
<v-chip color="warning" small dark label v-bind="attrs" v-on="on">
<v-icon small left>mdi-alert-outline</v-icon>
{{ item.activeAlarms.length }}
</v-chip>
</template>
<span v-for="alarm in item.activeAlarms" >{{ alarm.fullName }}</span>
</v-tooltip>
<v-tooltip v-else bottom color="light-green">
<template v-slot:activator="{ on, attrs }">
<v-chip color="light-green" small dark label v-bind="attrs" v-on="on">
No Alarms
</v-chip>
</template>
<span>No alarms for this system</span>
</v-tooltip>
</template>