Fix tooltip activator

ysakasin · Jul 17, 2020 · 5c02eee · 5c02eee
1 parent 4e72281
commit 5c02eee
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/AppBar.vue b/src/AppBar.vue
@@ -17,22 +17,26 @@
         placeholder="ロード中……"
       />
       <v-tooltip bottom>
-        <v-btn
-          slot="activator"
-          @click.stop="playSound = !playSound"
-          class="hidden-xs-only"
-          icon
-        >
-          <v-icon v-if="playSound">volume_up</v-icon>
-          <v-icon v-else>volume_off</v-icon>
-        </v-btn>
+        <template v-slot:activator="{ on }">
+          <v-btn
+            v-on="on"
+            @click.stop="playSound = !playSound"
+            class="hidden-xs-only"
+            icon
+          >
+            <v-icon v-if="playSound">volume_up</v-icon>
+            <v-icon v-else>volume_off</v-icon>
+          </v-btn>
+        </template>
         <span v-if="playSound">現在 : ON</span>
         <span v-else>現在 : OFF</span>
       </v-tooltip>
       <v-tooltip bottom>
-        <v-btn slot="activator" @click.stop="settings = true" icon>
-          <v-icon>settings</v-icon>
-        </v-btn>
+        <template v-slot:activator="{ on }">
+          <v-btn v-on="on" @click.stop="settings = true" icon>
+            <v-icon>settings</v-icon>
+          </v-btn>
+        </template>
         <span>設定</span>
       </v-tooltip>
     </v-toolbar>

diff --git a/src/Tool.vue b/src/Tool.vue
@@ -37,9 +37,11 @@
       >{{ command }}</v-btn
     >
     <v-tooltip bottom>
-      <v-btn slot="activator" @click.stop="edit = true" icon>
-        <v-icon>add</v-icon>
-      </v-btn>
+      <template v-slot:activator="{ on }">
+        <v-btn v-on="on" @click.stop="edit = true" icon>
+          <v-icon>add</v-icon>
+        </v-btn>
+      </template>
       <span>ショートカット追加</span>
     </v-tooltip>
     <ShortcutDialog v-model="edit" />