html - vue提交按钮数据

Question

假设我有这段代码

<main>
    <form>
        <input type="text" v-model="name"> 
        <button type="submit" @click="submit">
            Submit From Vue Property
        </button>
    </form>
</main>

这是 Vue 代码。

new Vue({
   el : 'main',
   data : {
       name : ''
   },
   methods : {
      submit(){

      }
   }
}) 

如何从 Vue 数据属性提交到服务器？我在提交方法中使用的。

(老实说，我的实际代码很复杂，但问题是一样的。如何提交 Vue 数据属性？)

Answer 1

如果您正在寻找基于 ajax 的解决方案，请考虑使用名为“axios”的库'.它允许您使用 url 发布/获取数据，就像 jquery 的 get 和 post 方法一样。

要使用 axios，您需要先使用 npm 安装 axios，npm install axios --save，使用 import axios from axios 导入它，然后在提交中使用它。新代码如下所示:

<main>
    <form @submit.prevent="submit">
        <input type="text" v-model="name"> 
         <button type="submit">
            Submit From Vue Property
        </button>
    </form>
</main>


new Vue({
   el : 'main',
   data : {
       name : ''
   },
   methods : {
      submit(){
          axios.post('/your-url', {name: this.name})
          .then(res => {
              // do something with res
          })
          .catch(err => {// catch error});
      }
   }
})