CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Bakhodir
Bakhodir

Reputation: 33

Passing the data into component in vuejs

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?

Upvotes: 0

Views: 36

Answers (1)

Dev Yego
Dev Yego

Reputation: 553

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>

Upvotes: 1

Related Questions