[Vuejs]-How can I update data from parent component when I click child component on the vue component?

by

4👍

✅

You really should get in the habit of using events instead of directly accessing the parent component from a child.

In your case, it would be simple to emit an event in the then handler of the child’s async request:

.then((response) => {
  this.$emit('imageAdded', item);
});

And listen for it in the parent scope:

<child-component @itemAdded="createImage"></child-component>

That way, any component that uses that child component can react to its imageAdded event. Plus, you won’t ever need to spend time debugging why the createImage method is firing when it’s never being called in the Vue instance.

Your code isn’t working because the way you are invoking the createImage method means that the this inside the function will not be referencing the parent component instance when it is called. So setting this.clicked or this.test will not affect the parent instance’s data.

To call the parent component’s function with the right context, you would need to do this:

this.$parent.createImage(item, response)
👤thanksd

Leave a comment