Vuetify模板中正确展示计算属性的问题：登录用户首字母在v-menu插槽内无法正常显示

嘿，我一眼就揪出问题所在啦！你在v-menu的activator插槽里犯了个小失误：

问题根源 #

Vuetify的v-menu组件的activator插槽，自带的参数只有on、attrs这些，根本没有userInitials这个属性。你在插槽解构里写了{ on, attrs, userInitials }，相当于在插槽的局部作用域里创建了一个未定义的新变量，直接覆盖了你组件里的同名计算属性，结果自然就显示空字符串了。

修复方案 #

把插槽参数里的userInitials删掉就行！组件的计算属性在插槽作用域里是可以直接访问的，完全不需要从插槽参数里获取。修改后的代码如下：

<v-menu v-if="this.$store.getters.getLoggedUser">
  <template v-slot:activator="{ on, attrs }">
    <v-avatar v-bind="attrs" v-on="on">
      {{ userInitials }}
    </v-avatar>
  </template>
  <!-- 这里可以添加你的菜单下拉内容 -->
</v-menu>

你之前在v-menu外面能正常用这个计算属性，就是因为外面没有变量覆盖它，而插槽里的错误解构刚好把它“遮挡”住了。现在去掉多余的userInitials参数，就能正常显示用户首字母啦！

备注：内容来源于stack exchange，提问作者Luis Urán