Vue.js で作るForm(フォーム)

Vue.jsで作るフォーム

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。ちょっと魔法のようですが、v-model はユーザーの入力イベントにおいてデータを更新するための基本的な糖衣構文 (syntax sugar) で、それに加えて、いくつかのエッジケースに対しては特別な配慮をしてくれます。

<参考文献>

https://jp.vuejs.org/v2/guide/forms.html

入力フォーム input (text)

HTML

<!-- v-model.lazyでinputからカーソルが離れた際に発火するようにする -->
<input id="title" type="text" v-model.lazy="eventData.title">
<pre>{{ eventData.title }}</pre> <!-- 確認 -->

JavaScript

export default {
  data(){
    return{
      eventData:{  //eventDataプロパティにtitleの初期値を設定
        title:'',
      }
    }
  }
}

入力フォーム input (number)

HTML

<!-- v-model.numberでvalueを数値に固定 -->
<input id="maxNumber" type="number" v-model.number="eventData.maxNumber"> 
<p>{{ typeof eventData.maxNumber }}</p> <!-- 確認 -->

JavaScript

export default {
  data(){
    return {
      eventData:{
        maxNumber: 0,
      }
    }
  }
}

input (先頭と後尾の改行を取り除く)

HTML

<!-- v-model.trimで改行を取り除く -->
<input id="host" type="text" v-model.trim="eventData.host"> 
<pre>{{ eventData.host }}</pre>

JavaScript

export default {
  data(){
    return{
      eventData:{
        host: ''
      }
    }
  }
}

チェックボックス(単体)

HTML

<input type="checkbox" id="isPrivate" v-model="eventData.isPrivate">
<label for="checkbox">非公開</label>
<p>{{ eventData.isPrivate }}</p>

JavaScript

export default {
  data(){
    return{
      eventData:{
        isPrivate: false, //boolean型で返ってきます
      }
    }
  }
}

チェックボックス(複数)

HTML

<input type="checkbox" id=10 value="10代" v-model="eventData.target"> 
<label for="10">10代</label>
<input type="checkbox" id=20 value="20代" v-model="eventData.target"> 
<label for="20">20代</label>
<input type="checkbox" id=30 value="30代" v-model="eventData.target"> 
<label for="30">30代</label>
<input type="checkbox" id=40 value="40代" v-model="eventData.target"> 
<label for="40">40代</label>
<p>{{ eventData.target }}</p>

JavaScript

export default {
  data(){
    return{
      eventData:{
        target: [], //配列で指定
      }
    }
  }
}

ラジオボタン

HTML

<input type="radio" id="free" value="free" v-model="eventData.price">
<label for="free">無料</label>
<input type="radio" id="paid" value="paid" v-model="eventData.price">
<label for="paid">有料</label>
<p>{{ eventData.price }}</p>

JavaScript

export default {
  data(){
    return{
      eventData:{
        price: "free"
      }
    }
  }
}

セレクトボックス

HTML

<select v-model="eventData.location" multiple>
<option v-for="location in locations" v-bind:key="location">
{{ location }}</option>
</select>
<p>{{ eventData.location }}</p>

JavaScript

export default {
  data(){
    return {
      locations: ["東京", "埼玉", "千葉", "神奈川"],
       eventData:{
         location: []
       }
    }
  }
}