Vueで検索機能を実装したい

Question

Vueを使って簡単なSPAを作っているのですが、検索機能の作り方がよくわかりません。
jsonのデータからからイベントを検索したいです。

コードは以下の通りです。

<template>
  <div id="get_data">
    <input type="text" v-model="key">
    <div v-for="event in searchEvent"></div>
  </div>
</template>

<script>

export default {
  el: "#get_data",
  data() {
    return {
      //jsonのデータを入手する変数
      json_data: [],
      //検索用のキーワードを入れる
      key: ""
    };
  },
  computed: {
    //検索用の関数
    searchEvent: function() {
      let event_list = [];
      var i;
      for (i in this.json_data) {
        var events = this.json_data[i];
        if (events.indexOF(this.key) !== -1) {
          event_list.push(events);
        }
      }
      return event_list;
    }
  }
};

Comments

[yasutomi]

コードを見た限りではVueの基礎が全然理解できていないようですので
もう少し学習してから質問することを推奨します。

[keimoriyama]

そうですね...
基礎を固めてから更新しようと思います。

Answer 1

Vueのフィルタの機能について調べると良いと思います。
（ただ、computedでリストを絞り込むのも全然アリだと思う）

具体的になにがわからないのかもう少し書いてもらえるとアドバイスしやすいです。
（コードにとくに問題がみあたらない）