Как передать данные другому компоненту в vue js - PullRequest
Новая
       10

Как передать данные другому компоненту в vue js

2 голосов
/ 22 октября 2019

Я создал страницу карьеры, которая, когда пользователь выбирает название должности, на которую он претендует, перенаправляет ее в форму заявки и отображает название должности. Если они заинтересованы подать заявку на должность, они введут некоторые данные, которые включают их полное имя, контакт и резюме. После того, как они подали заявку, она отправит данные на сервер с указанием позиции, которую они уже применили.

Header.vue 

<template>
  <div>
    <h1 class="title-wrapper">
      Application Form
    </h1>
    <p class="info-wrapper">
      You are applying as
      <nuxt-link to="/careers">
        <u>{{ title }}</u>
      </nuxt-link>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
};
</script>

Form.vue 

<form class="app-form" @submit.prevent="onSubmit">
  <InputField
    v-model="fullName"
    label="Full Name"
    firequired
    required
    placeholder="Your full name"
    @handleChange="handleChangeName($event)"
  />
  <button type="submit">Submit</button>
</form>

Application.vue (Parent) 

<div class="contact-wrapper">
  <Intro :title="title" />
  <Form />
</div>

Проверка для отправки формы находится внутри Form.vue, как отправить заголовок из Header.vue в Form.vue и отправить его на сервер. Это то, что я пытался

Form.vue 

<script>
export default {
  name: 'Submit',
  template: '<nuxt-link to="/careers"><u>{{ title }}</u></nuxt-link>',
  methods: {
    onSubmit() {
      this.$axios.post('url', {
        position:this.title
      })
   }
};
</script>

И он ничего не возвращает

...