☰

vuetify 2.0 の v-menu アクティベータ内で v-tooltip を使用する 質問する

tag-icon • tag-icon vue.js vuetify.js
vuetify 2.0 の v-menu アクティベータ内で v-tooltip を使用する 質問する

vuetify 2.0 で v-menu アクティベーター内で v-tooltip を使用するにはどうすればよいでしょうか? 以前は、 を使用して動作していましたslot="activator"。

私が組み合わせようとしているのは次のものです:

<v-menu>
  <template v-slot:activator="{on}">
    <v-btn v-on="on">Menu Trigger</v-btn>
  </template>
  <!-- list with menu options -->
</v-menu>

そして

<v-tooltip v-slot:activator="{on}">
  <v-btn v-on="on">Menu Trigger with Tooltip</v-btn>
  <span>Tooltip Content</span>
</v-tooltip>

ここで、v-tooltip を v-menu 内に貼り付けようとしていますが、ここで {on} を使用するとどうなるでしょうか?

ベストアンサー1

onテンプレートに渡される「競合する」オブジェクトについてよくわからないと思います。複数 activatorスロットと、すべてのイベント ハンドラーをターゲット要素に適用する方法を説明します。

その場合は、どちらか（または両方）を変数に割り当てることで回避できます。別の名前（見る：新しい変数名への割り当て）、そして分解して「再構築」することで、基本的にそれらを（merge技術的に言えば、それらを）接着し直します。

<v-menu>
  <template #activator="{ on: onMenu }">
    <v-btn v-on="onMenu">Menu Trigger</v-btn>

    <v-tooltip bottom>
      <template #activator="{ on: onTooltip }">
        <v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
      </template>

      <span>Tooltip Content</span>
    </v-tooltip>
  </template>

  <!-- ...list with menu options... -->
</v-menu>

または、スロット プロパティを直接使用します。コンポーネントのデータやプロパティと名前の競合が発生しないように、適切な名前を付けるようにしてください。

<v-menu>
  <template #activator="menu">
    <v-btn v-on="menu.on">Menu Trigger</v-btn>

    <v-tooltip bottom>
      <template #activator="tooltip">
        <v-btn v-on="{ ...menu.on, ...tooltip.on }">Menu Trigger with Tooltip</v-btn>
      </template>

      <span>Tooltip Content</span>
    </v-tooltip>
  </template>

  <!-- ...list with menu options... -->
</v-menu>

完全なデモ:

new Vue({
  el: '#app',

  data: () => ({
    items: [
      { title: 'Item #1' },
      { title: 'Item #2' },
      { title: 'Item #3' }
    ]
  })
})
<link href="https://fonts.googleapis.com/css?family=Roboto:400|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-menu>
    <template #activator="{ on: onMenu }">
      <v-btn v-on="onMenu">Menu Trigger</v-btn>

      <v-tooltip bottom>
        <template #activator="{ on: onTooltip }">
          <v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
        </template>

        <span>Tooltip Content</span>
      </v-tooltip>
    </template>

    <v-list>
      <v-list-tile 
        v-for="(item, index) in items" :key="index"
        @click.prevent>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile>
    </v-list>
  </v-menu>
</div>

おすすめ記事