v-modelを駆使した様々なフォームづくり

// フォーム
<input v-model="eventData.detail" id="detail">
// 複数行フォーム
<textarea v-model="eventData.detail"
        id="detail"
        cols="30" rows="10">
// チェックボックス
<input type="checkbox" 
        v-model="eventData.isPrivate" id="isPrivate">
// 複数のチェックボックス
<input type="checkbox" 
        v-model="eventData.target" id="30" value="30代">
<input type="checkbox" 
        v-model="eventData.target" id="20" value="20代">
// ラジオボタン
<input type="radio"
        v-model="eventData.price" id="free" value="無料">
<input type="radio"
        v-model="eventData.price" id="paid" value="有料">
// セレクトボックス
<select v-model="eventData.location">
    <option v-for="location in locations" :key="location">
    {{ location }}</option>
</select>
 
data(){
    return {
        locations: ["東京","大阪","名古屋"]
        eventData: {
            detail: "foo",
            isPrivate: false,
            target: [],
            price: "無料",
            location: "東京"
        }

チェックボックスやラジオボタンでv-modelを使う

デフォルトではコンポーネントにある v-model は value をプロパティとして、input をイベントして使うが、チェックボックスやラジオボタンなどのインプットタイプは value 属性を別の目的で使う事がある。model オプションを使うことでこういった衝突を回避する事ができる。