vue提交按钮数据

qpgpyjmq  于 2023-02-16  发布在  Vue.js
关注(0)|答案(2)|浏览(181)

假设我有这个代码

<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数据属性代替?)

1qczuiv0

1qczuiv01#

如果你正在寻找一个基于 AJAX 的解决方案,可以考虑使用一个名为“axios”的库,它允许你使用url来发布/获取数据,就像jquery的get和post方法一样。
要使用axios,首先需要使用npm,npm install axios --save安装axios,然后使用import axios from axios导入它,并在submit中使用它。

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

lymnna712#

在这里你可以使用vue提交全部表单数据,variables.you可以使用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>

相关问题