Vue.js リアルタイム検索 #Vue.js

Vue.jsで検索機能を実装します
検索ボタンを押してリロード後に検索結果を表示するのではなく、ユーザーが入力すると、ボタンを押さなくても、リロード無しで直ぐに検索結果が出てくるような機能です

検索欄を作成

まずは検索欄を作成します。　v-modelを使用して入力した文字をkeywordに同期させます(keywordに入力した文字を格納するイメージ)。
vuetifyを使用しています。

<template>
  <div id="app>
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
　　　 <!-- input type="text" v-model="keyword"> vuetify使わないならこう？-->
    </div>
  </div>
</template>

こんな感じになります

次に検索用に使うデータを用意します
検索用に使う変数keywordも用意します

<template>
  <div id="app>
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
　　　 <!-- input type="text" v-model="keyword"> vuetify使わないならこう？-->
    </div>
  </div>
</template>
<script>
  new Vue({
    data: {
　　　 keyword: "",//検索用
      fruits: [
        {id: 1, name: "オレンジ"}
        {id: 2, name: "メロン" }
        {id: 3, name: "アップル"}
      ]
    }
  })
</script>

検索のロジックを作成

検索ボックスに文字が入力された瞬間、関連データだけ表示する実装をします。
リアルタイムでデータ検索するには、データのフィルター機能が必要です。
例えば、検索ワードが「メロン」だった場合、ひとつずつデータをチェックして「メロン」という文字列が含まれているかどうかをチェックし、もし含まれているのならそのデータを残して他はスルーしなければいけません。
これを実装するためには、Vueのcomputedを利用します。
computedはデータが変更（ここでは検索キーワードが入力）されると同時に実行される算出プロパティです。

filteredFruits: function() {
    var fruits = []; //検索にヒットしたデータを格納する配列を用意
    for(var i in this.fruits) {  //this.fruitsはdataで定義しているもの　3つのデータをforで順番に回していきます
        var food  = this.fruits[i];  //回されてきたデータを変数foodに格納
        if(food.name.indexOf(this.keyword) !== -1) { //ここでfood.name(オレンジやメロン)とkeyword(ユーザーが入力した文字)が一致するか判断
            fruits.push(food); //一致するなら配列fruitsにデータを格納
        }
    }
    return fruits;  //fruitsを返します
}

これで検索条件に合ったデータだけを返せるようになりました
検索に一致したデータだけを画面上に表示させます

<template>
  <div id="app>
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
    </div>
    <tr v-for="fruits in filteredFruits" :key="fruits.id">
      <td v-text="fruits.name"></td>
    </tr>
  </div>
</template>

以上でVue.jsでのリアルタイム検索ができると思います！

完成コード

<template>
  <div id="app">
    <div class="search">
      <v-text-field type="text" v-model="keyword" label="検索"></v-text-field>
    </div>
　　 <tr v-for="fruits in filteredFruits" :key="fruits.id">
      <td v-text="fruits.name"></td>
    </tr>
  </div>
</template>
<script>
  new Vue({
    data: {
　　　 keyword: ""
      fruits: [
        {id: 1, name: "オレンジ"}
        {id: 2, name: "メロン" }
        {id: 3, name: "アップル"}
      ]
    },
    computed: {
      filteredFruits: function() {
        var fruits = [];
        for(var i in this.fruits) { 
          var food  = this.fruits[i];  
          if(food.name.indexOf(this.keyword) !== -1) { 
            fruits.push(food); 
          }
        }
        return fruits; 
      }
    }
  })
</script>