使用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)
  },
},

这是一个小提琴。