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.