使用 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 ref="form" class="form-horizontal" @submit.prevent="submitBid">

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

Here's a fiddle.