vue form axios post未提交

Question

我的 fom 有以下代码

<form @submit="onSubmit" method="POST">

  <div class="mb-4">

    <label class="block" for="name">

      <span class="text-gray-900">Full name</span>

      <input

        class="form-input mt-1 block w-full outline-none"

        placeholder="Sherlock Holmes"

        v-model="formData.name"

        required

        id="name"

        name="name"

        type="text"

      />

    </label>

  </div>

  <div class="mb-4">

    <label class="block" for="email">

      <span class="text-gray-900">Email address</span>

      <input

        class="form-input mt-1 block w-full outline-none"

        placeholder="[e-mail]"

        v-model="formData.email"

        required

        id="email"

        name="email"

        type="email"

      />

    </label>

  </div>

  <div class="mb-4">

    <label class="block" for="department">

      <span class="text-gray-700">Department</span>

      <select

        class="form-select mt-1 block w-full outline-none"

        name="deptid"

        v-model="formData.deptid"

      >

        <option value="1">General Support</option>

        <option value="5">Billing Support</option>

        <option value="2">Hosting Support</option>

        <option value="3">Domain Support</option>

        <option value="4">Game Support</option>

      </select>

    </label>

  </div>

  <div class="mb-4">

    <label class="block" for="message">

      <span class="text-gray-900">Message</span>

      <textarea

        class="form-input mt-1 block w-full outline-none h-56 resize-none"

        placeholder="Enter your message here"

        v-model="formData.message"

        name="message"

        id="message"

        cols="30"

        rows="10"

        required

      />

    </label>

  </div>

如果我执行以下操作<form action="/backend/contact.php" method="POST">，则表格可以contact.php正常工作。所以我不确定为什么 axios 帖子不起作用。

Answer 1

你在调用 this.formdata 而不是 this.formData？编辑：注意：您正在使用onSubmit: function () {}不要使用普通函数，因为这里的 this 指的是当前函数使用 ES6 函数onSubmit() {}编辑：var form = new FormData()form.append('name', this.formData.name)form.append('email', this.formData.email)form.append('deptid', this.formData.deptid)form.append('message', this.formData.message)&nbsp; axios.post("https://hostedcarbon.com/backend/contact.php", form)&nbsp; .then(res => {&nbsp; &nbsp; console.log(res);&nbsp; })&nbsp; .catch(err => {&nbsp; &nbsp; console.error(err);&nbsp; });