Vue.jsにてチェックボックス、ラジオボタンでの双方向データバインド

複数チェックボックスでの双方向データバインド

　　　　

１つ１つのチェックボックスに別々のプロパティをバインドするのではなく、グループに対して1つのプロパティをバインドする。

バインドさせるデーターは配列なので、あらかじめ空の配列[]を宣言しておく。

また、文字列に変換する変換するプロパティを用意しておくと便利。ここではjoin()関数を使用してます。

HTML

<div id=”app”>
<span class=”yellow”>ご注文をお選びください：{{selection}}</span>
<label>
<input type=”checkbox” v-model=”answer” value=”ケーキ”>ケーキ
</label>
<label>
<input type=”checkbox” v-model=”answer” value=”紅茶”>紅茶
</label>
<label>
<input type=”checkbox” v-model=”answer” value=”コーヒー”>コーヒー
</label>
</div>

CSS

.yellow {
background: linear-gradient(transparent 65%, yellow 65%);
}

　　　

JavaScript

var app = new Vue({
el: ‘#app’,
data: {
answer:[]
},
computed: {
// チェック内容を連結した文字列を返す算出プロパティ
selection: function(){
return this.answer.join();
}
}
});

ラジオボタンにバインドする

ラジオボタンはグループ内で常に１つしか選択できないので、バインドしたプロパティは配列ではなく文字列となります。

HTML

<div id=”app2″>
<p>当店のサービスはいかがでしたか？：{{answer2}}</p>
<label>
<input type=”radio” v-model=”answer2″ value=”素晴らしい”>素晴らしい
</label>
<label>
<input type=”radio” v-model=”answer2″ value=”普通”>普通
</label>
<label>
<input type=”radio” v-model=”answer2″ value=”まだまだ”>まだまだ
</label>
</div>

CSS

.red {
color: red;
}

　　　

JavaScript

var app2 = new Vue({
el: ‘#app2’,
data: {
answer2: ‘選択してください’
}
});

わからないことはプロフェッショナルから学ぶのが一番