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.

Solution

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.