Question

我创建了一个职业页面，当用户选择其应聘职位的标题时，它将重定向到申请表中，并显示该职位的标题。如果他们有兴趣申请该职位，他们将输入一些全名，联系人和简历。一旦他们提交了申请，它将把包括他们已经申请的职位的数据发送到服务器。

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（父级）

<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>

它什么也不返回

如何将数据传递到Vue JS中的另一个组件

0 个答案: