Getting input field values from Form submit using Vue

Question

I have a form with 1 input field that i want to shoot into the database. I am using Vue.

Template:

<form class="form-horizontal" @submit.prevent="submitBid">
        <div class="form-group">
            <label for="bid"></label>
            <input name="bid" type="text">
        </div>
        <div class="form-group">
            <input class="btn btn-success" type="submit" value="Bieden!">
        </div>
    </form>

Component:

export default {        
    props: ['veiling_id'],
    methods: {
        submitBid(event) {
            console.log(event);


        },
    },
    computed: {

    },
    mounted(){

    }
}

How do i get the value of the input field inside submitBid function?

Any help is appreciated.

thanksd · Accepted Answer · 2017-08-31 15:24:33Z

12

Bind a value to it via v-model:

<input name="bid" type="text" v-model="bid">

data() {
  return {
    bid: null,
  }
},
methods: {
  submitBid() {
    console.log(this.bid)
  },
},

Alternately, add a ref to the form, and access the value via the form element from the submitBid method:

<form ref="form" class="form-horizontal" @submit.prevent="submitBid">

methods: {
  submitBid() {
    console.log(this.$refs.form.bid.value)
  },
},

Here's a fiddle.

answered Aug 31, 2017 at 15:24

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

1 Comment

Rubberduck1337106092 Over a year ago

This is great and exactly what i needed, i understand now. Thx

Collectives™ on Stack Overflow

Getting input field values from Form submit using Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related