Vue.js入門その７〜セレクトボックスを動的に変更してみる〜

1 はじめに
- 1.1 サンプル
2 とりあえず作ってみる
3 tagsがセットされたら、タグのセレクトボックスを表示
4 さいごに
5 おすすめ書籍

はじめに

こんにちは、naoki85です。
今回はよくあるパターンですが、1つめのセレクトボックスを選択したら、次のセレクトボックスの項目を変えてみます。

サンプル

実際のサンプルはこちらです。
良い例が思いつかなかったので、このブログのカテゴリとタグを例にしてみました（笑）

とりあえず作ってみる

まずはソースコードを載せ、その後、説明を入れたいと思います。

ソースコード

 <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>

<label for="category">Category</label>

</option>

</select>

<br>

<div>

</option>

</select>

</div>

 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; } } })

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 省略記法

 <select name="category" v-model="selectedCategory" @change="fetchTags">

1	<select name="category" v-model="selectedCategory" @change="fetchTags">

<option>はv-forでリストレンダリング

フォーム入力バインディング

v-for を使用してリストレンダリングする際、 value 属性に category.id をバインドすることで、その値を持たせることができます。

また、 v-bind も省略記法があります。
v-bind 省略記法

 <option v-for="category in categories" :value="category.id"> {{ category.name }} </option>

</option>

メソッドを呼んで、プロパティの値を変更

セレクトボックスが変わったタイミングで、 fetchTasks メソッドを呼んで、 tags の値を変えます。
今回はメソッド内でタグの値をベタ書きしていますが、 config やAPIで取得することを想定しています。

tags の値が変われば、タグの方でも v-model を設定しているので、セレクトボックスが変わります。

tagsがセットされたら、タグのセレクトボックスを表示

とりあえずこれで動きはするのですが、 tags がセットされるまではタグのセレクトボックスを非表示にしておこうと思います。

JavaScriptの length で、 tags の配列長を取得してそれに応じて表示させたいと思います。

 <!-- Tags --> - <div> + <div v-if="tags.length > 0">

- <div>

+ <div v-if="tags.length > 0">

さいごに

簡単ですが、今回は以上になります。

次回はテストかVuexを扱いたいな、と思っております。
（ただ、主にRailsにVue.jsを載せることを考えているので、Rails側でテストコードを書こうかな、と悶々としております。）

日	月	火	水	木	金	土
					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

Vue.js入門その７〜セレクトボックスを動的に変更してみる〜

はじめに

サンプル

とりあえず作ってみる

ソースコード

セレクトボックスにv-modelでバインド

<option>はv-forでリストレンダリング

メソッドを呼んで、プロパティの値を変更

tagsがセットされたら、タグのセレクトボックスを表示

さいごに

おすすめ書籍

フォロー

アプリ情報