vue submit button data

Question

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? )

Could not understand you completely. What do you mean by submit from data property? — Vamsi Krishna
– Vamsi Krishna, Commented Jul 30, 2017 at 9:10
i'm sorry before. I mean submit "this.name" or maybe "this.email" or another property I keep in Vue. I want to save whatever user input first before submit them. — iwgx
– iwgx, Commented Jul 30, 2017 at 9:13
where do you want to save them. They get bound to the properties you initialized in data property as you are using v-model — Vamsi Krishna
– Vamsi Krishna, Commented Jul 30, 2017 at 9:15
that gets automatically done by v-model , you do not need to do anything more — Vamsi Krishna
– Vamsi Krishna, Commented Jul 30, 2017 at 9:21

Shekhar Joshi · Accepted Answer · 2017-07-30 09:15:25Z

11

If you are looking for an ajax based solution, consider using a library called 'axios'. It lets you post/get data using urls much like jquery's get and post methods.

To use axios you need to first install axios using npm, npm install axios --save, import it using import axios from axios and use this in submit. The new code will look like below:

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

answered Jul 30, 2017 at 9:15

Shekhar Joshi

1,0181 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

iwgx Over a year ago

so not in the button, but in form tag instead?

iwgx Over a year ago

thanks for your help. But can I now how if i'm not using ajax?

Shekhar Joshi Over a year ago

yeah, if you don't do that then on click the default behaviour of form will kick in and the page will just refresh

Shekhar Joshi Over a year ago

if you are not using ajax then there is not point of using vuejs, all you need to do is give the inputs a name and put method and action attributes on the form tag

Shekhar Joshi Over a year ago

Yes you can do that, Vue is a progressive framework and you can even use it like you use jQuery. Include Vue using a cdn and initialise a vueapp and write your own autocomplete logic, if any other autocomplete library is available via a cdn you can even use that.

|

Bhaskararao Gummidi · Accepted Answer · 2018-10-05 07:25:44Z

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>

Collectives™ on Stack Overflow

vue submit button data

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related