チェックボックスにおける双方向データバインドについて

Vue.jsにてチェックボックスでの双方向データバインド | Bidirectional data binding with checkboxes in Vue.js

テキストエリアへの双方向データーバインド

入力内容:{{message}}

HTML <div id=”app”>
<textarea v-model=”message”>{{message}}</textarea>
<p>入力内容:{{message}}</p>
</div>

JavaScript var app = new Vue({
el: ‘#app’,
data: {
message: ‘v-modelを使った双方向データバインド’
}
});

テキストに記載したものが、v-model機能によってちゃんとコンポーネント側に伝えられているかコンソールからチェックしてみよう

テキストに適当に書く →　console →　「app.message」と入力　→　反映しているのを確認

今度はdata側からDOMを操作してみよう。

console →　「app.message =”ここに適当な文字を入れてみよう”」　→　ENTER

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

ケーキはお好きですか？:{{answer}}
チェックしてください

HTML <div id=”app2″>
<label class=”yellow”>ケーキはお好きですか？:{{answer}}</label>
<input id=”cake” type=”checkbox” v-model=”answer” true-value=”はい”　false-value=”いいえ”>
<label for=”cake”>チェックしてください</label>
</div>

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

JavaScript var app2 = new Vue({
el: ‘#app2’,
data: {
answer:’はい’
}
});

v-modelでバインドしたプロパティにはtrueまたはfalseが設定されます。チェックを付けた場合にはtrue、チェックをつけなかった場合にはfalseが代入されることになるので、プロパティをそのまま描画すると’true’や’false’という文字列が表示されてしまいます。

そこで、真偽値ではなく文字列をバインドする方法があり、チェックボックスに特別な属性true-valueとfalse-valueを使うと任意の文字列をバインドできます。

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

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

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。