vue.js - 使用 Axios 向 Quip API 提交表单

Question

我想使用 vue.js 和 axios 向 Quip 的 Create Document API 提交表单数据。这是我迄今为止尝试过的：

形式：

             <form @submit="saveToQuip" method="POST" action="./post-order.html"> 
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="checkout__input">
                                    <label>Receiver's Name<span>*</span></label>                                        
                                    <input type="text" name="First Name" v-model="fullname" required>
                                </div>
                            </div>
                        </div>
                        .....
            </form>

JS：

new Vue({
  el: '#submit-order',
  data () {
    return {
      cartItems: [],
      fullname: '',
      facebookname: '',
      email: 'NONE',
      address: '',
      phone_number: '',
      payment_method: '',
      delivery_dtime: '',
      ordernotes: 'NONE'
    }
  },
  methods:{
    saveToQuip(submitEvent) {
     ......
        axios.post('where-to-send-form-data', {
          headers : {   
            Authorization: 'Bearer ' + personal_token,
            'Content-Type': content_type
            //Access-Control-Allow-Origin : *
          },
          params: {
            title: this.fullname,
            type: 'document',
            member_ids: folder_id,
            content: content
          }
        })
        .then((response) => {
          console.log(response)
        })  
        .catch(function (error) {
          console.log(error);   
        })  
        .then(function () { 

      });   ;
    }
  }
})

当我尝试提交表单时，它没有运行 axios post 命令，并且控制台中没有错误。它只是将页面重定向到下一页。我如何实现这一目标？

Answer 1

从表单中删除方法和操作并从按钮触发操作

<form @submit="saveToQuip" method="POST" action="./post-order.html"> 

至

   <form>
   ...
     <button @click="saveToQuip()">SAVE</button>