vuetify　v-menu内でthisが使えない

このページのメニューを表示するサンプルを改良してページを作っているのですが、v-menuの<template v-slot:activator="{ on, attrs }">内でthisを参照すると

[Vue warn]: Error in render: "TypeError: can't access property "$store", this is null"

found in

---> <VMenu>
       <VAppBar>
         <Header> at src/components/Header.vue
           <VApp>
             <App> at src/App.vue
               <Root>

と怒られてしまいます...

js
1      <div class="text-center">
2        <v-menu offset-y>
3          {{this.$store.getters.userData.first_name+ " " +this.$store.getters.userData.last_name + "  さん"}} <!-- ここだと使える -->
4          <template v-slot:activator="{ on, attrs }">
5            {{this.$store.getters.userData.first_name+ " " +this.$store.getters.userData.last_name + "  さん"}} <!-- ここだと使えない -->
6            <v-btn
7              color="primary"
8              dark
9              v-bind="attrs"
10              v-on="on"
11            >
12            </v-btn>
13          </template>
14
15          <v-list>
16            <v-list-item
17              v-for="(item, index) in items"
18              :key="index"
19            >
20              <v-list-item-title>{{ item.title }}</v-list-item-title>
21            </v-list-item>
22          </v-list>
23        </v-menu>
24      </div>

といった感じです。
ここでthisが使えなくて困っています。
回答お願いします

行動規範の内容に同意します

回答1件

ベストアンサー

名前付きslot v-slot:activator のコンテキスト内ではthisがグローバルのdocumentを指していることが原因ではないかと思われます。
template内では、 this は省略可能です。以下のように、$store.getters.XXX と直接指定することで、適切にstoreの各プロパティにアクセスできるようになるかと思います。

html
1<div class="text-center">
2  <v-menu offset-y>
3    <template v-slot:activator="{ on, attrs }">
4      {{ $store.getters.userData.first_name + ' ' + $store.getters.userData.last_name + '  さん' }}
5      <v-btn color="primary" dark v-bind="attrs" v-on="on"> </v-btn>
6    </template>
7
8    <v-list>
9      <v-list-item v-for="(item, index) in items" :key="index">
10        <v-list-item-title>{{ item.title }}</v-list-item-title>
11      </v-list-item>
12    </v-list>
13  </v-menu>
14</div>

もしくは、次のように予め定義したcomputedプロパティ経由でアクセスすることも可能です。

js
1  computed: {
2    firstName: function () {
3      return this.$store.getters.userData.first_name;
4    },
5    lastName: function () {
6      return this.$store.getters.userData.last_name;
7    },
8  },

html
1<div class="text-center">
2  <v-menu offset-y>
3    <template v-slot:activator="{ on, attrs }">
4      {{ firstName + ' ' + lastName + '  さん' }}
5      <v-btn color="primary" dark v-bind="attrs" v-on="on"> </v-btn>
6    </template>
7
8    <v-list>
9      <v-list-item v-for="(item, index) in items" :key="index">
10        <v-list-item-title>{{ item.title }}</v-list-item-title>
11      </v-list-item>
12    </v-list>
13  </v-menu>
14</div>