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

はじめに

こんにちは、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>

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

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

おすすめ書籍