使用Vue從表單提交輸入字段值

Question

我有一個帶有1個輸入字段的表單，我想要進入數據庫。 我正在使用Vue。

模板：

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

零件：

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


        },
    },
    computed: {

    },
    mounted(){

    }
}

如何在submitBid函數中獲取輸入字段的值？

任何幫助表示贊賞。

Answer 1

通過v-model綁定一個值：

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

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

---

或者，在表單中添加一個ref ，並通過submitBid方法中的form元素訪問該值：

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

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

這是一個小提琴。