Sample List

【Vue.js】No.004 Vue.jsでインクリメンタルサーチ

まずはv-forを使ってリスト表示させる

まずは単純にリスト表示ですので、v-forを使い配列をループさせるだけですね。
HTMLは以下のようになりますね。 

<ul id="test1">
  <li v-for="artist in artists">
    {{ artist }}
  </li>
</ul>

JSは以下のようになります。 

new Vue( {
  el: '#test1',
  data: {
    artists: [
      "Acid Black Cherry",
      "Janne Da Arc",
      "L'Arc~en~Ciel",
      "BREAKERZ",
      "X JAPAN",
      "UVERworld",
      "B'z"
    ]
  }
} );

結果は以下のようになります。

  • {{ artist }}

いよいよもってフィルタリングしてみる

ver1.x系の時はfilterByというフィルタを用いて出来たようなのですが、ver2.x系からはやり方が大きく変わったようです。
`JavaScript組み込みの.filterメソッドを算出プロバティへ使用します。`
とのことですが、自分自身も良く分かっておりませんので、早速実際にコードを見ていきたいとおもいます。。

まずはHTML側ですね。 

<ul id="test2">
  <li v-for="artist in filterArtist">
    {{ artist }}
  </li>
</ul>

filterArtistと言う記述が鍵のようですね。
それでは、JS側も見てみましょう。 

new Vue( {
  el: '#test2',
  data: {
    artists2: [
      "Acid Black Cherry",
      "Janne Da Arc",
      "L'Arc~en~Ciel",
      "BREAKERZ",
      "X JAPAN",
      "UVERworld",
      "B'z"
    ]
  },
  computed: {
    filterArtist: function() {
      return this.artists2.filter( function( artist ) {
        return artist.indexOf( 'n' ) !== -1
      } )
    }
  }
} );

上記コードの赤字部分が、以下を意味しているようです。
`JavaScript組み込みの.filterメソッドを算出プロバティへ使用します。`
computedというのが算出プロバティを指しており、その中でfilterArtistという関数が新たに定義されたのですね。
よって、<li v-for="artist in filterArtist">という記述になっていたのですね。

どの文字でフィルタリングするかという指定箇所ですが、上記JSコードの白太字のnという部分になりますね。

実際にnでフィルタリングしてみた結果がこちらです。

  • {{ artist }}

Janne Da ArcとL'Arc~en~Cielのみのリストになったことが確認できると思います。

現時点ではnという指定部分が固定でつまらないので、テキストフィールドの値を代入するなどの動的な指定方法に変えてみたいと思います。

テキストフィールドによるフィルタリングをしてみる

よくありますよね、テキストフィールドに何か入力された時点で一覧がリアルタイムで絞り込まれるやつ。
今回はその機能を実装してみたいと思います。

HTMLは以下のようにします。 

<div id="test3">
  <input type="text" v-model="searchQuery">
  <ul>
    <li v-for="artist in filterArtist">
      {{ artist }}
    </li>
  </ul>
</div>

上記コードの赤字部分がテキストフィールドになりますね。

それでは、JSは以下のように。 

new Vue( {
  el: '#test3',
  data: {
    searchQuery: '',
    artists3: [
      "Acid Black Cherry",
      "Janne Da Arc",
      "L'Arc~en~Ciel",
      "BREAKERZ",
      "X JAPAN",
      "UVERworld",
      "B'z",
      "シャ乱Q"
    ]
  },
  computed: {
    filterArtist: function() {
      query = this.searchQuery; // テキストフィールドの値を変数に格納
      return this.artists3.filter( function( artist ) {
        return artist.indexOf( query ) !== -1
      } )
    }
  }
} );

先程のコードと同様、算出プロバティ(computed)を使います。
絞込の指定部分は太字になっているqueryという変数になりますね。
この変数の中身が、テキストフィールドの値となります。

結果は以下となりますね。
テキストフィールドがありますので、実際に入力して試してみてください。

  • {{ artist }}
一覧に戻る