vue.jsでの単一選択及び複数選択のセレクトボックスにて双方向データバインド

Vue.jsにてセレクトボックスでの双方向データバインド | Bidirectional data binding in select box in Vue.js

単一選択のセレクトボックスにて双方向データバインド

当店のご利用頻度は？:{{message}}

HTML <div id=”app”>
<p>当店のご利用頻度は？:{{message}}</p>
<select v-model=”message”>
<option disabled value=””>選択してください</option>
<option value=”初めて”>初めて</option>
<option value=”週1回以上”>週1回以上</option>
<option value=”月2回以上”>月2回以上</option>
<option value=”半年に1回”>半年に1回</option>
</select>
</div>

CSS .red {
color: red;
}

JavaScript var app = new Vue({
el:’#app’,
data: {
message: ‘ ‘
}
});

複数選択のセレクトボックスにて双方向データバインド

分類：{{seletedCategory}}

HTML <div id=”app2″>
<p class=”red”>分類：{{seletedCategory}}</p>
<select v-model=”category” multiple>
<option value=”宿泊費”>宿泊費</option>
<option value=”食費”>食費</option>
<option value=”交通費”>交通費</option>
</select>
</div>

multiple属性をつけると複数選択が可能になります。| If you add the multiple attribute, you can select multiple items.

複数選択するにはshiftキーを押したまま選択肢をクリック | To select multiple items, hold down the shift key and click the option.

CSS .red {
color: red;
}

JavaScript var app2 = new Vue({
el:’#app2′,
data: {
category:[]
},
computed: {
seletedCategory: function(){
// 1件以上選択されている場合、選択された値を連結した文字列を返す
return this.category.length >=1 ? this.category.join() : ”;
}
}
});

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

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

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

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