はじめに
こんにちは、naoki85です。
今回はよくあるパターンですが、1つめのセレクトボックスを選択したら、次のセレクトボックスの項目を変えてみます。
サンプル
実際のサンプルはこちらです。
良い例が思いつかなかったので、このブログのカテゴリとタグを例にしてみました（笑）
とりあえず作ってみる
まずはソースコードを載せ、その後、説明を入れたいと思います。
ソースコード
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="app"> <!-- Categories --> <label for="category">Category</label> <select name="category" v-model="selectedCategory" v-on:change="fetchTags"> <option v-for="category in categories" v-bind:value="category.id"> {{ category.name }} </option> </select> <br> <!-- Tags --> <div> <label for="tag">Tag</label> <select name="tag" v-model="selectedTag"> <option v-for="tag in tags" v-bind:value="tag.id"> {{ tag.name }} </option> </select> </div> </div> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | var app = new Vue({ el: '#app', data: { selectedCategory: '', selectedTag: '', categories: [ {id: 1, name: 'Tech'}, {id: 2, name: 'Design'}, {id: 3, name: 'Report'}, ], tags: [] }, methods: { fetchTags: function() { var tmp_tags = []; if (this.selectedCategory == 1) { tmp_tags = [ {id: 1, name: 'iOS'}, {id: 2, name: 'Android'}, {id: 3, name: 'FrontEnd'}, {id: 4, name: 'BackEnd'}, {id: 5, name: 'Server'}, ] } else if (this.selectedCategory == 2) { tmp_tags = [ {id: 6, name: 'UI / UX'}, {id: 7, name: 'Tools'}, ] } else if (this.selectedCategory == 3) { tmp_tags = [ {id: 8, name: 'Events'}, {id: 9, name: 'Products'}, ] } else { alert('Invalid value!!') } this.tags = tmp_tags; } } }) |
セレクトボックスにv-modelでバインド
セレクトボックスの変更に対応して、
selectedCategory
の値を変えるため、
v-model
で双方向バインディングします。
値が変わったタイミングでメソッドを呼びたいので、
v-on:change
を使用します。
なお、
v-on:change
は下記のように省略形で書けます。
v-on 省略記法
| 1 | <select name="category" v-model="selectedCategory" @change="fetchTags"> |
<option>はv-forでリストレンダリング
v-for
を使用してリストレンダリングする際、
value
属性に
category.id
をバインドすることで、その値を持たせることができます。
また、
v-bind
も省略記法があります。
v-bind 省略記法
| 1 2 3 | <option v-for="category in categories" :value="category.id"> {{ category.name }} </option> |
メソッドを呼んで、プロパティの値を変更
セレクトボックスが変わったタイミングで、
fetchTasks
メソッドを呼んで、
tags
の値を変えます。
今回はメソッド内でタグの値をベタ書きしていますが、
config
やAPIで取得することを想定しています。
tags
の値が変われば、タグの方でも
v-model
を設定しているので、セレクトボックスが変わります。
とりあえずこれで動きはするのですが、
tags
がセットされるまではタグのセレクトボックスを非表示にしておこうと思います。
JavaScriptの
length
で、
tags
の配列長を取得してそれに応じて表示させたいと思います。
| 1 2 3 | <!-- Tags --> - <div> + <div v-if="tags.length > 0"> |
さいごに
簡単ですが、今回は以上になります。
次回はテストかVuexを扱いたいな、と思っております。
（ただ、主にRailsにVue.jsを載せることを考えているので、Rails側でテストコードを書こうかな、と悶々としております。）
おすすめ書籍
