Question

当我在创建时执行此操作时，它会起作用：

axios
  .delete('http://localhost:8000/product/10')
  .then(response => {
    console.log(response);
  })
  .catch(err => {
    console.log(err);
});

但是，如果我按下一个按钮并在提交时调用一个方法，该方法执行的代码将无法正常工作，那么在后台，我将进入控制台

OPTIONS /product/10 204 0.172 ms - 0

请注意，当我按下按钮时，页面会刷新，如果我快速单击按钮几次，页面就会执行

编辑：我禁用了刷新，现在可以正常工作了，有什么我可以做的，因为我希望即使刷新也可以执行该方法。模板：

<b-form class="mt-5 pt-5">
  <b-form-group id="productId" label="Product id " label-form="productIdInput">
    <b-form-input id="productIdInput" type="text" v-model="productForm.id" placeholder="enter product id you wish to delete"> </b-form-input>
  </b-form-group>
  <button type="button" v-on:click="deleteProduct()">Delete</button>
</b-form>

methods:{
  deleteProduct() {
    // this.$store.dispatch('removeProduct',this.productForm.id);
    axios
      .delete('http://localhost:8000/product/10')
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.log(err);
      })
  },
}

Answer 1

删除请求首先发送选项，这似乎是由于跨域的原因，然后它等待响应以发送真实请求，当我单击按钮并且页面刷新选项时，发送了，但是（据我所知）是删除请求不再存在以等待响应，因此我只是在方法

中添加了e.preventDefault（）

Vuejs axios删除方法适用于已创建但不适用于方法

1 个答案: