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.

使用Vue从表单提交输入字段值

1 个答案: