Vue.js access parent component

Question

I've got a child-component that has this method:

getSubscriptions () {
    MessageService.subscriptions()
            this.$parent.loading = true;
            .then((data) => {
                if (data.data.subscriptions == null) {
                    this.noSubscriptions = true;
                } else {
                    this.subscriptions = data.data.subscriptions;
                }

                this.$parent.loading = false;
            }).bind(this);
}

So I want to show a load circle in my parent component I access it like this:

this.$parent.loading

(My parent component has a data attribute called loading)

But when I try to compile that with gulp ^ I receive:

[14:52:56] Starting 'browserify'...
  46 |                             }
  47 | 
> 48 | t                           this.$parent.loading = false;
     |                             ^
  49 |                         }).bind(this);
  50 |             },
  51 | 
{ SyntaxError: unknown: Unexpected token (48:28)
  46 |                             }
  47 | 
> 48 | t                           this.$parent.loading = false;
     |                             ^
  49 |                         }).bind(this);
  50 |             },

What could be wrong here?

(I'm using Vue.js 1.0)

PatrickSteele · Accepted Answer · 2016-10-13 13:34:50Z

18

You're putting a new statement in the middle of a promise setup. You need to rearrange the code:

this.$parent.loading = true;
MessageService.subscriptions()
        .then((data) => {

However, I wouldn't directly access the parent like this. It creates a tight coupling between parent and child -- this component will only work if the parent exposes a loading flag.

Instead, look into custom events.

answered Oct 13, 2016 at 13:34

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js access parent component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related