vue.jsを使った検索可能なテーブル

2015-02-07

vue.jsを使うと、余分なコードは一切なく驚くほど簡単にできる。

この例ではJavaScriptコードはほとんどデータを定義しているだけである。

なお、filterBy ～ in searchKeyのsearchKeyはモデル名である。
例えば、固定的にnameプロパティに対して検索したい場合は、 filterBy ～ in 'name'のように'で囲う必要がある。
nameモデルが無い状態で、filterBy ～ in nameだと全プロパティが検索対象になり、エラーも警告も出ないので注意。

例

Search in order by

Search `{{searchText}}` in {{searchKey}} order by {{searchOrder}}

ID	Name
{{id}}	{{name}}

<div id="test-app">
  Search <input type="text" v-model="searchText" placeholder="type ">
  in <select v-model="searchKey">
    <option>id</option>
    <option selected>name</option>
  </select>
  order by <select v-model="searchOrder">
    <option>id</option>
    <option selected>name</option>
  </select>
  <div>Search `` in  order by </div>
  <table border="1">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr v-repeat="items | filterBy searchText in searchKey | orderBy searchOrder">
      <td></td>
      <td></td>
    </tr>
  </table>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: '#test-app',
    data: {
      items: [
        {id: 1, name: 'lime'},
        {id: 2, name: 'orange'},
        {id: 3, name: 'cherry'},
        {id: 4, name: 'apple'},
        {id: 5, name: 'raspberry'},
        {id: 6, name: 'banana'}
      ]
    }
  });
</script>

vue.js参考サイト

examples 3