Vuetify - Переключатель видимости активатора списка меню

Обновлено перо с использованием большего количества CSS и без v-hover: Codepen

(Первоначально я использовал v-hover, но для этого случая не нужен) Codepen [ 1112]

Мы будем управлять видимостью, используя следующий класс CSS:

.hidden {
  visibility: hidden;
}

кнопка меню скрыта, если:
a) мы не наведем курсор на его родительский элемент. тайл или
б) при открытии соответствующего меню.

Итак, нам нужно настроить компонент пользовательского элемента (плитки):

Установить управление видимостью меню:

data: () => ({
  menu: false,  // control button-menu state (opened / closed)
})

И наш шаблон начинается с компонента v-hover, поэтому мы можем определить, когда мы наводим на него курсор и реагируем на это событие:

<template>
  <v-hover>
    <v-list-tile slot-scope="{ hover }" @click="">
      // ...
      <v-menu v-model="menu" offset-y left >
        <v-btn slot="activator"
               :class="{hidden: !hover && !menu}"
        >

:class="{hidden: !hover && !menu}" - мы устанавливаем класс hidden для кнопки, когда мы не наводим курсор на родительский тайл и когда соответствующее меню закрыто. [1118 ]