从表单提交使用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.