Vue.js 2 pass data from component to root instance

Question

I have a component that makes an AJAX request. In the callback function I want to pass a value back to the parent or root instance.

So my callback function for example in the component is:

function callbackFunc(vm, response){
  vm.$emit('setValue', response.id);
}

and in my root instance I've tried using a method called setValue like this:

export default {
  name: 'app',
  data () {
    return {
      value : ''
    }
  },
  methods: {
    setValue: function(value){
      console.log(value);
    }
  }
}

This doesn't work. The documentation seems to say you need to have an event inside the template for it all to get hooked up but that's not going to work in this case.

Any ideas?

Cheers!

Can you show a bit more code? How is your callback getting called etc. — Bert
– Bert, Commented Jun 15, 2017 at 19:35
It's literarly just a function on it's own in the global scope. vm is a reference to the vue instance so that $emit can be called. — BarryWalsh
– BarryWalsh, Commented Jun 15, 2017 at 19:43
If it's in the global scope, why not just something like const app = new Vue(...) and in callbackFunc use app.setValue(response.id). — Bert
– Bert, Commented Jun 15, 2017 at 19:46
Updated my question with the full root instance. How would I get it to work with that? Cheers! — BarryWalsh
– BarryWalsh, Commented Jun 15, 2017 at 19:49
Possible duplicate of Vue.js what's the difference of $emit and $dispatch? — ceejayoz
– ceejayoz, Commented Jun 15, 2017 at 19:52

Mark · Accepted Answer · 2017-06-15 20:18:24Z

1

I'm using vue-router. So there's the root element that has an App component and then there'sthe component called Hello which has the ajax call

In the parent component's template you will have a <router-view><\router-view> which is where the vue-router will put your child. To wire everything up, you need to add the directive to the template:

<router-view v-on:setValue="parentMethod" ><\router-view>

When the child calls $emit("setValue") after the ajax call, it will triggers parentMethod() on the parent. It's not clear why you say it won't work to hook it up in the template. Without the template, there's not really a parent/child relationship.

answered Jun 15, 2017 at 20:18

Mark

92.6k8 gold badges116 silver badges156 bronze badges

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

7 Comments

BarryWalsh Over a year ago

Cheers! Trying this now. I'm getting: Property or method "parentMethod" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

BarryWalsh Over a year ago

Sorry I fixed that. Amazing, that works! Thank you! I understand what's going on better now. I thought I needed to have it binded to like a click event or blur or something. Thanks again!

Mark Over a year ago

Sorry - that wasn't clear. I meant parentMethod in a generic method on your parent. You need to write this method on your parent and call it something like parentMethod or even setValue() The template is telling your parent component to listen for the event setValue and then call some method on the parent.

Mark Over a year ago

Glad it's working. In Vue and also (Angular) getting the parent/child one-way communication took me a couple tries before it 'clicked'

BarryWalsh Over a year ago

Yeah that was crazy confusing for me! Thanks again!

|

Collectives™ on Stack Overflow

Vue.js 2 pass data from component to root instance

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related