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)

  axios.post("https://hostedcarbon.com/backend/contact.php", form)

  .then(res => {

    console.log(res);

  })

  .catch(err => {

    console.error(err);

  });