vue submit button data

user_6891352 0
Viewed 26978

Suppose I had this code

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

And this the Vue code.

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

      }
   }
})

how to submit to server from Vue data property instead? That i used in submit method.

( honestly, my actual code is much complicated but the problem is same. How to submit Vue data property instead? )

vuejs2 vue.js html
3 Answers

Here you can submit total formdata using vue variables.you can make api's using axios. 

<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>
user_97756530

is there a way to do this without axios, i am not making a server call i just need the data in another js file inside the project

user_184223870
Related