Vuetify中禁用状态的v-list-item无法显示v-tooltip问题求助

问题说明 #

需要实现：当action对象包含isDisable属性时，禁用对应的v-list-item，同时显示提示tooltip，但原代码中禁用状态下tooltip无法触发。原代码如下：

<v-list>
  <v-list-item
    v-for="(action, i) in actions"
    :key="`action-${i}`"
    :disabled="action.isDisable"
  >
    <v-tooltip>
      <template v-slot:activator="{ on, attrs }">
        <v-list-item-content v-bind="attrs" v-on="on">
          <v-list-item-title>{{ action.name }}</v-list-item-title>
        </v-list-item-content>
      </template>
      <span>Tooltip for disabled list.</span>
    </v-tooltip>
    <v-list-item-content v-else>
      <v-list-item-title>{{ action.name }}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

问题原因 #

禁用状态的DOM元素会拦截所有鼠标事件，而v-tooltip默认依赖hover等鼠标事件触发，绑定在禁用元素内部的内容上时，事件无法正常传递，导致tooltip无法显示。

解决方案 #

方案1：将tooltip绑定到v-list-item并启用disabled支持 #

直接把tooltip的激活器绑定到v-list-item本身，同时给v-tooltip添加disabled属性，强制tooltip在元素禁用时依然响应事件：

<v-list>
  <v-list-item
    v-for="(action, i) in actions"
    :key="`action-${i}`"
    :disabled="action.isDisable"
  >
    <v-tooltip :disabled="!action.isDisable">
      <template v-slot:activator="{ on, attrs }">
        <v-list-item-content v-bind="attrs" v-on="on">
          <v-list-item-title>{{ action.name }}</v-list-item-title>
        </v-list-item-content>
      </template>
      <span>Tooltip for disabled list.</span>
    </v-tooltip>
  </v-list-item>
</v-list>

方案2：用外层容器包裹禁用项，绑定tooltip到容器 #

给禁用的v-list-item套一个非禁用的外层容器，将tooltip绑定到这个容器上，容器能正常接收鼠标事件，从而触发tooltip：

<v-list>
  <template v-for="(action, i) in actions" :key="`action-${i}`">
    <div v-if="action.isDisable">
      <v-tooltip>
        <template v-slot:activator="{ on, attrs }">
          <div v-bind="attrs" v-on="on">
            <v-list-item :disabled="true">
              <v-list-item-content>
                <v-list-item-title>{{ action.name }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </div>
        </template>
        <span>Tooltip for disabled list.</span>
      </v-tooltip>
    </div>
    <v-list-item v-else>
      <v-list-item-content>
        <v-list-item-title>{{ action.name }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </template>
</v-list>

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