如何在Nuxt.js 3中使用POST请求发送表单数据

Question

我正在制作一个静态网站，但需要联系表单，该表单应将表单数据发送到电子邮件，我正在使用 Nuxt.js 3，已尝试使用 useFetch()，也尝试使用 axios。

以下是我的代码：

Contact Vue 模板

<template>
  <section id="ng-ctt" class="ng-ctt">
    <div class="ng-ct">
      <div class="ng-fx">
        <div class="ng-fx6-m">
          <figure class="ng-ctt-img">
            <img src="~/assets/media/illustrations/contact.svg" alt="ctt img" class="ng-img">
          </figure>
        </div>
        <div class="ng-fx6-m">
          <div class="ng-fxc">
            <div class="ng-ctt-text">
              <span class="ng-title">Mail</span>
              <NuxtLink to="mailto:[e-mail]" class="ng-link">[e-mail]</NuxtLink>
            </div>

            <div class="ng-ctt-text">
              <span class="ng-title">Location</span>
              <span class="ng-text">Lagos, Nigeria</span>
            </div>
           
            <div class="ng-ctt-text">
              <span class="ng-ctt-text-or">OR</span>
            </div>

            <form @submit.prevent="submitForm" id="ng-fm" class="ng-fm">
              <div class="ng-fm-row">
                <input type="text" v-model="formData.full_name" class="ng-inp" placeholder="Full Name">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.email" class="ng-inp" placeholder="Email">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.phone_no" class="ng-inp" placeholder="Phone Number">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.service" class="ng-inp" placeholder="Service">
              </div>
              <div class="ng-fm-row">
                <textarea name="" v-model="formData.message" class="ng-inp" placeholder="Message"></textarea>
              </div>
              <div class="ng-fm-row">
                <button class="ng-bt-pri" type="submit">Send Message</button>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>

联系脚本

<script lang="ts" setup>
  interface formData {
    full_name: string,
    email: string,
    phone_no: string,
    service: string,
    message: string,
  }

  let formStatus: {} = {
    loading: false,
    success: false,
    error: false,
  }

  let formData: formData = {
    full_name: "",
    email: "",
    phone_no: "",
    service: "",
    message: "",
  };

  async function submitForm() {

    // console.log(data);
    // console.log(JSON.stringify(formData));
    // this.formStatus.loading = true,
    // await this.$axios.$post("/api/contact", {
    //   full_name: this.full_name,
    //   email: this.email,
    //   phone_name: this.phone_name,
    //   service: this.service,
    //   message: this.message
    // }).then(response => {
    //   this.success = true
    //   this.errored =false
    // }).catch(error => {
    //   this.errored = true
    // }).finally(() => {
    //   this.loading = false
    // });
  }

  // return {
  //   formData: formData
  // }

</script>

主要问题是如何在Nuxtjs 3中以POST请求发送表单数据。

- Dominion

---

formData 应该是 Vue 组件的一部分。添加 data () { return { formData } } - https://v2.vuejs.org/v2/api/?redirect=true#data - wendt88

Answer 1

我尝试使用FormData的相同方式...但最终将参数作为json body发送了。

我使用Nuxt3提供的$fetch函数。我的表单提交方法如下。

methods: {
    formSubmit() {

        this.formRequest().then( (result) => {
            console.log(result)
        }).catch( (error) => {
            console.error('Contact form could not be send', error)
        });
    },

    async formRequest() {

        return await $fetch( <your-form-endpoint>, { 
            headers: {
                "Content-Type": "multipart/form-data",
            },
            method: 'POST',
            body: {
                'message': <your-form-data>,
                'name': <your-form-data>
            }
        } );
    }
}

在我的情况下，由于跨域问题，有必要将Content-Type设置为multipart/form-data。希望这对你有所帮助。

- robjke

---

谢天谢地，有人知道他们在做什么。谢谢！Axios看起来比这个干净得多 - 我不知道为什么他们在Nuxt3中放弃了它。 - Crimbo

@Crimbo 是的，在 RC 状态下，nuxt 的 useFetch 组合函数似乎非常不稳定，并且可能会在版本之间产生一些破坏性的变化。你必须仔细阅读更新日志。希望 nuxt3 能够尽快投入生产，以避免这些问题。 - robjke