Getting profile name in VueJS

VueJS
1

Hi all,

I’m struggling to display username in my VueJS app. I just can’t figure out how to reactively grab the character name, since Meteor will initiate loggingIn() before the user is properly logged in.

For example:

<template>
    <div class="top-bar">
        <div class="avatar">
            <span class="avatar-img"><img v-bind:src="charImage" /></span>{{ charName }}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'topbar',
        data: function() {
            return {
                charImage: '',
                charName: ''
            }
        },
        meteor: {
            data: {
                charName() {
                    if( !Meteor.user ) {
                        this.charName = 'Loading...';
                    } else {
                        this.charName = Meteor.user().profile.eveOnlineCharacterName;
                    }
                }
            }
        }
    }
</script>

This displays noting. In fact, it doesn’t even show Loading... where I think it should. It was my understanding you put the reactive data in the meteor block?

Any suggestions or examples of displaying this? To confirm, I’m definitely logged in.

Cheers!

2

The correct syntax is:

        meteor: {
            data: {
                charName() {
                    if( !Meteor.user ) {
                        return 'Loading...';
                    } else {
                        return Meteor.user().profile.eveOnlineCharacterName;
                    }
                }
            }
        }
3

@akryum the man himself! :wink:

That’s still not working for me. Even changing it to:

meteor: {
    data: {
        charName() {
            if( Meteor.loggingIn() ) {
                return 'Loading...';
            else if( !Meteor.user() ) {
                return 'Loading...';
            } else {
                return Meteor.user().profile.eveOnlineCharacterName;
            }
        }
    }
}

Doesn’t work! :frowning:

It’s definitely something to do with the reactive data. Am I missing something?

Running Meteor.user().profile.eveOnlineCharacterName in the console works fine.

Cheers!

4

Did you install vue-meteor-tracker npm package?

import VueMeteorTracker from 'vue-meteor-tracker';
Vue.use(VueMeteorTracker);
3 Likes
5

Meteor’s logingIn() and currentUser() are just global helpers provided by Accounts packages. You can make it a Vue mixin or put into Vuex to achieve similar effect.

Though something like this.$user would be nice to have. I need to finally learn how to write such plugins.

6

Well don’t I feel dumb, it was exactly this.

Thanks a lot @akryum and also a big thanks for your packages, they’re great!

1 Like