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

12492 ワード
HTML5 Vue.js JavaScript vue-cli JavaScript テキストリンク

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: []
       }
    }
  }
}
国慶節の翌日