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>

이런 느낌이 듭니다


다음으로 검색에 사용할 데이터를 준비합니다.
검색에 사용할 변수 키워드도 제공합니다.

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