VueJS access nested component data value

Question

Parent Component contains one Address Component:

// ParentComponent.vue
<Address ref="childAddress"></Address>

Address Component contains many contact components :

// AddressComponent.vue
<template>
  <div>
    <Contact ref="childContact"></Contact>
    <Contact ref="childContact"></Contact>
    <Contact ref="childContact"></Contact>
  </div>
</template>
export default {
  components: { Contact },
  data: () => ({
    address_inputs: [],
  }),
  methods: {
    getAddresses() {
      // RETURN address_inputs
    }
  }
}

Contact Component container:

// ContactComponent.vue
    <template>
      <div>
        contact component
      </div>
    </template>
    export default {
      components: { Contact },
      data: () => ({
        contact_inputs: [],
      }),
      methods: {
        getContacts() {
          // RETURN contact_inputs
        }
      }
    }

What I am trying to do:

I am trying to get address_inputs[] from AddressComponent and contact_inputs[] from ContactComponent in the ParentComponent.

What I have tried:

I have tried to call getAddresses in AddressComponent using: this.$refs.childAddress.getAddresses();

And this works fine but I could not then access the ContactComponent contact_input[] value.

I am using Vuex but to store my API values and state but in this case I just want object from child component to parent — Ahmed essam
– Ahmed essam, Commented Oct 22, 2018 at 23:34

Filip Wroński · Accepted Answer · 2018-10-22 23:17:22Z

1

$refs attribute is feature that allow you to manipulate DOM for example change div color so you are going wrong way.

If you want pass data from parent to component you should use props. If you want recive data from child to parent you have to use events.

In your example you are trying to pass data from child to parent so in your child component write input change method which emit event for example: this.$emit('testEvent', dataFromInput);

End then in your parent template you can catch it

<Contact ref="childContact" @testEvent="printData"></Contact>

and in parent js part

methods: {
  printData(dataFromInput) {
    console.log(dataFromInput);
  }
}

that's all.

answered Oct 22, 2018 at 23:17

Filip Wroński

3562 silver badges8 bronze badges

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

2 Comments

Ahmed essam Over a year ago

I am using the Contact inputs and store them in an object so how I pass this object using events?

Filip Wroński Over a year ago

You can use watch and on value change trigger event with data. watch: { contact_inputs: function (val) { this.$emit('testEvent', val); },

Collectives™ on Stack Overflow

VueJS access nested component data value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related