Call Methods of Mixin within Component (Vuejs)

Question

I can't call mixin method from the component, I get this error this.hello is not a function.

I can call hello() from Vue instance but I can't call it within the component.

What's a matter?!

<div id='vue-app'>
  <cmp></cmp>
</div>

const mixin = {
  methods: {
    hello() {
      return 'Hello World!';
    }
  },
  created() {
    console.log('Mixin Created!');
  },
};

const cmp = {
  created() {
    console.log('From Cmp:', this.hello());
  },
};

new Vue({
  components: {
    cmp
  },
  el: '#vue-app',
  mixins: [mixin],
  created() {
    console.log('From VM:', this.hello());
  },
});

https://jsfiddle.net/ar464soq/

daxigu · Accepted Answer · 2017-11-04 11:07:49Z

5

Correct, mixin methods/data are only available with in the instance its added to. However if you really want the mixin in your root intstance you can call this.$root.hello() from any child component of the root instance

answered Nov 4, 2017 at 11:07

daxigu

592 bronze badges

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

Comments

Yaser Khahani · Accepted Answer · 2017-11-04 10:53:34Z

2

Well, it seems I have to load the Mixin throughout of the Component instance, not from Vue parent instance :)

answered Nov 4, 2017 at 10:53

Yaser Khahani

7057 silver badges15 bronze badges

1 Comment

hendra1 Over a year ago

is there a way we just need to declare on vue parent, so we do need to redeclare it again in child component?

mrroot5 · Accepted Answer · 2019-08-15 08:21:48Z

0

If you use nuxt with vue @daxigu won't work because the $root is nuxt it self. What can I do? This:

this.$root.$children[1].myRootMethod()

$root: As I said before, this is nuxt.
$children[0]: is nuxtloading.
$children[1]: is your main component, in my case, it was a base layout with a few global components and a global mixin.

Hope it helps.

answered Aug 15, 2019 at 8:21

mrroot5

2,0013 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

Call Methods of Mixin within Component (Vuejs)

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related