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 数据属性呢？）

原文由 iwgx 发布，翻译遵循 CC BY-SA 4.0 许可协议

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});
      }
   }
})

原文由 Shekhar Joshi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在这里您可以使用 vue 变量提交总表单数据。您可以使用 axios 制作 api。

 <template>
  <div>
    <form @submit.prevent="submitform">
       <input type="text" v-model="formdata.firstname">
       <input type="text" v-model="formdata.lastname">
       <input type="text" v-model="formdata.email">
       <input type="text" v-model="formdata.password">
       <button type="submit">
         Submitform
       </button>
    </form>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'el',
  data () {
    return {
       formdata:{ firstname: '', lastname: '', email: '', password: '' }
       // this is formdata object to store form values
    }
  },
  methods: {
    submitform(){
      axios.post('/url', { this.formdata })
      .then(res => {
         // response
      })
      .catch(err => {
         // error
      })
  },
  mounted () {

  },
  components: {

  }
}
</script>

原文由 Bhaskararao Gummidi 发布，翻译遵循 CC BY-SA 4.0 许可协议