Vue.jsでフォーム要素を簡単に作る

v-modelを使って作る。
v-modelにはいろいろオプション的なものが付けられて、以下のようなものがある。

  • v-model.lazy フォーカスが外れたときに反映させる
  • v-model.number 数字にする
  • v-model.trim 先頭と最後の空白を除去する

これらを使ってフォーム要素をリアクティブに作る。
App.vueに記述する。

<template>  
  <div style="padding: 10rem;">  
    <h2>イベントのフォーム</h2>  
    <label for="title">タイトル</label>  
    <input type="text" id="title" v-model.lazy="eventData.title" />  
    <pre>{{ eventData.title }}</pre>  

    <label for="max-number">最大人数</label>  
    <input  
      type="number"  
      id="max-number"  
      v-model.number="eventData.maxNumber"  
    />  
    <p>{{ typeof eventData.maxNumber }}</p>  

    <label for="host">主催者</label>  
    <input type="text" id="host" v-model.trim="eventData.host" />  
    <p>{{ eventData.host }}</p>  

    <label for="detail">イベントの内容</label>  
    <textarea  
      id="detail"  
      cols="30"  
      rows="10"  
      v-model="eventData.detail"  
    ></textarea>  
    <p style="white-space: pre;">{{ eventData.detail }}</p>  

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

    <p>参加条件</p>  
    <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>  
    <p>{{ eventData.target }}</p>  

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

    <p>開催場所</p>  
    <select v-model="eventData.location" multiple>  
      <option v-for="location in locations" :key="location">  
        {{ location }}  
      </option>  
    </select>  
    <p>{{ eventData.location }}</p>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      locations: ['東京', '大阪', '名古屋'],  
      eventData: {  
        title: 'タイトル',  
        maxNumber: 0,  
        host: '',  
        detail: '',  
        isPrivate: false,  
        target: [],  
        price: '無料',  
        location: ['東京'],  
      },  
    }  
  },  
}  
</script>  

そしてmain.jsを記述。

import App from './App.vue'  

Vue.config.productionTip = false  

new Vue({  
  render: h => h(App),  
}).$mount('#app')  

npm run serveでサーバーを立てると、以下のような簡単なフォームが出来上がる。
リアクティブにできているので、input要素の中身を変更するとvueインスタンスのデータも同時に変更される。