Passing the data into component in vuejs

Question

I'm tryining to pass the data from function in component to another component. Everything I googled was about passing the data to child-parent components, but not in my case.

So here is how my main component looks like

<template>
  <div>
    <h2>Contact List</h2>

    <router-link to="/">Home</router-link>

    <hr />

    <InputForms />

    <List />
  </div>
</template>

I'm passing the data in <InputForms> component, and I want to receive that data inside <List> components

Here's how I'm passing the data in <InputForms> component

 onSubmit() {
  let numberValidation = this.numbers.map(el => el.value === "");
  let addressValidation = this.addresses.map(el => el.value === "");
  let emailsValidation = this.emails.map(el => el.value === "");

  let len =
    numberValidation.length +
    addressValidation.length +
    emailsValidation.length;

  for (let i = 0; i < len; i++) {
    if (
      numberValidation[i] === true ||
      addressValidation[i] === true ||
      emailsValidation[i] === true ||
      this.title.trim() === ""
    ) {
      return this.$alert("you have an empty space");
      break;
    }
  }
  const newContact = {
    name: this.title,
    number: this.numbers,
    address: this.addresses,
    email: this.emails
  };

  this.$emit("newcontact", newContact);
}

How can I get newContact inside of <List> component?

Dev Yego · Accepted Answer · 2020-07-18 20:50:32Z

1

Register a handler for the emitted event on the containing component.

<InputForms v-on:newContact="onNewContact" />

Sync the emitted data with the containing component's data. This should be bound to the List component.

<List :newContact="newContact" />

Your containing component code

<template>
  <div>

    <InputForms v-on:newContact="onNewContact" />

    <List :newContact="newContact" />

  </div>
</template>

<script>
export default {
  data() {
    return {
      newContact: null
    };
  },
  methods: {
    onNewContact(newContact) {
      this.newContact = newContact;
    }
  }
}
</script>

edited Jul 18, 2020 at 20:50

answered Jul 18, 2020 at 18:03

Dev Yego

5533 silver badges15 bronze badges

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

1 Comment

Dev Yego Over a year ago

@Bakhodir, I have made some edits on the answer to demonstrate.

Collectives™ on Stack Overflow

Passing the data into component in vuejs

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related