Vuetify新手求助：为动态v-chip添加v-tooltip遇显示异常

问题原因 #

1. 未正确使用v-tooltip的activator插槽：Vuetify的tooltip组件必须通过activator插槽绑定触发元素的事件与属性，否则无法正常渲染触发元素。
2. 错误绑定事件：代码中v-on="item"将数据对象直接绑定为事件，导致对象被转为字符串[object Object]显示。

修正后的完整代码 #

<template v-slot:[`item.activeAlarms`]="{ item }">
  <!-- 有活跃告警的情况 -->
  <v-tooltip v-if="item.activeAlarms.length > 0" color="warning" bottom lazy>
    <template v-slot:activator="{ on, attrs }">
      <v-chip small label color="warning" v-bind="attrs" v-on="on">
        <v-icon small left>mdi-alert-outline</v-icon>
        {{ item.activeAlarms.length }}
      </v-chip>
    </template>
    <!-- 拼接所有告警的fullName，换行显示 -->
    <span style="white-space: pre-wrap;">
      {{ item.activeAlarms.map(alarm => alarm.fullName).join('\n') }}
    </span>
  </v-tooltip>

  <!-- 无告警的情况 -->
  <v-tooltip v-else color="success" bottom lazy>
    <template v-slot:activator="{ on, attrs }">
      <v-chip label small dark color="light-green" v-bind="attrs" v-on="on">
        <v-icon small left>mdi-check</v-icon> Keine
      </v-chip>
    </template>
    <span>No Alarm</span>
  </v-tooltip>
</template>

关键说明 #

• 正确使用activator插槽：通过v-slot:activator="{ on, attrs }"获取tooltip需要的事件和属性，再绑定到v-chip上，确保tooltip触发逻辑正常，同时避免渲染异常。
• 告警列表展示：使用map提取所有告警的fullName，再用join('\n')拼接为换行字符串，配合white-space: pre-wrap样式让tooltip内的文本自动换行。
• 移除错误绑定：删除了原代码中v-on="item"这个错误的事件绑定，恢复v-chip的正常渲染。

内容的提问来源于stack exchange，提问作者Reginald