Can i trigger function on another component from my header?

Question

Hello i have a question about vue routing and how the tree works. I have my parrent router where i have my router-view and my header on same level.

i have some functions i want to trigger from my header to a route called dashboard within my router-view

e.g: header.vue

<a href="#" @click.prevent="update()"> click me to update dashboard </a>

dashboard.vue

<p> {{datafrom filldata}} </p>

  methods: { 
   fillDataToP() {
    function to fill data
   }
  }

is this possible in vue?

Possible duplicate of [Communication between sibling components in VueJs 2.0](https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vuejs-2-0) — Emile Bergeron, Aug 21 '18 at 16:50
[Frank's answer](https://stackoverflow.com/a/51952090/1218980) is one of the ways already listed in the duplicate candidate, there are other ways, and in this case, the data should be in a Vuex state and the update button should trigger an action which would update the state, then triggering a rerender of the dashboard accordingly. — Emile Bergeron, Aug 21 '18 at 16:53

score 1 · Accepted Answer · answered Aug 21 '18 at 15:30

1

You could use the EventBus feature within vuejs.

in your main.js file add

const EventBus = new Vue()

Vue.prototype.$bus = EventBus;

from your header.vue file you can now emit an event:

Example this.$bus.emit('someString', SomeObjectToPass);

Then on your Dashboard.vue you can listen to an event by using:

this.$bus.on('sameStringAsInEmit', () => {

// Fill Data

})

answered Aug 21 '18 at 15:30

frank Walleway

When i create this it says that this.$bus.on is not an function – Anders Bootsmann Larsen Aug 22 '18 at 06:49
Sorry, forgot to add the $ before on: this.$bus.$on() should work. Same goes for the emit: this.$bus.$emit() :) – frank Walleway Aug 22 '18 at 07:06
hehe i figured that out, but now im trying to call a function from my methods on dashboard, but it says that the this.filldata() is not a function :) – Anders Bootsmann Larsen Aug 22 '18 at 07:31
i can console log things but not use a method from dashboard – Anders Bootsmann Larsen Aug 22 '18 at 07:37
The this, when calling this.filldata(), refers to the eventbus. What you could do is: declare a variable called self and assign this to it (before you call the this.$bus). e.g var self = this; Then in the .$on() you can use the method by calling it from the self: self.functionToCallFromDashboard() – frank Walleway Aug 22 '18 at 09:16

1 Answers1