How to properly show computed property on template with vuetify?-CodePudding

I want to show my user (which is inside a store) initials only when it's logged in. My template is:

<v-menu v-if="this.$store.getters.getLoggedUser">
        <template v-slot:activator="{ on, attrs, userInitials }">
            <v-avatar v-bind="attrs" v-on="on">
                {{ userInitials }}
            </v-avatar>
        </template>
</v-menu>

Where userInitials is a computed property:

computed: {
        userInitials() {
            return this.$store.getters.getLoggedUser.name.split(' ').map(word => word[0].toUpperCase()).join('');
        }
    }

What I'm getting is an empty string instead of the initials. I tried using the computed property outside of the v-menu tag and it's working fine.

CodePudding user response：

You're overriding userInitials in slot scope deconstruction:

                                      <!--