[Vuejs]-Accessing child component data vuejs

by

0👍

Change @add-hero="addHero" to @add-hero="anyMethodName"
and create a method:

anyMethodName(value) {
    //do what you want with the chosenHeroes
}

value is the chosenHeroes that was passed through from the child component.

See link for example: https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

0👍

If you want to pass data from child to parent you can pass a parent’s method as a prop to the child:

PARENT TEMPLATE SECTION

  <child-component :dataHandler="dataHandler">
  </child-component>

PARENT METHOD IN SCRIPT METHODS SECTION

dataHandler (input) {
  // handle your new data in parent component
}

CHILD SCRIPT PROPS SECTION

props: ["dataHandler"]

register your prop. You can use dataHandler in child as normal method and pass there new data as argument – the method will be executed in parent, but with the data you provided as argument in the child.

The error that you are getting suggests that chosenHeroes is not an array (maybe it’s undefined?).

0👍

The $emit will work when it is called, and in parent, it will be same as events (firing only when events are happened). In this case, you need the data from the child always render a div in the parent (if what I understand is correct).

It is better to use the Vuex store for your purpose. You can sync the data into the store from the child component. Since the store data is global, it is accessible from all components.

Leave a comment