vue.jsでボタンクリックで絞り込み検索結果を表示したい

Question

前提・実現したいこと

https://teratail.com/questions/178834
を参考にテーブルの絞り込み検索の実装を行っているのですが、うまくいかないため、質問させていただきます。

表示については、上記の参考URLと同様で、jsonファイルをaxiosを使用して、非同期で取得し、responseをvueファイル内のdataに格納し、dataをv-forで回し、テーブル内に表示しています。

テキストボックスに入力された文字列と同じ文字列があるものを、検索ボタンをクリック後に、テーブルに表示したいのですが、うまくいきません。

プログラミングを始めたばかりの初心者です。基本的な間違いもあわせて、アドバイスを頂ければ幸いです。

発生している問題・エラーメッセージ

上記のように「a」を入力後に検索ボタンをクリックすると

と正しく結果が表示されるのですが、続けて「b」を入力、または「空欄」で検索ボタンをクリックすると

と、データ上には、あるのですが、表示されません。

該当のソースコード

var json_path = './json/samp.json';//jsonのパス

var app = new Vue({
  el: '#app',
  data: {
    kws: [],//json格納先
    searchkw: ''//検索ボックスのテキスト
  },
  //jsonファイル読み込み
    created:function () {
    axios.get(json_path).then(response => {
      this.kws = response.data
    })
      .catch(err => {
        console.error(err);
      })
  },
  computed:{
    getList:function(){
      return this.kws;        
    }
  },
    methods: {
      //検索実行
    isSearch:function() {
      var data=this.kws;//検索データ全件
      var skw=this.searchkw.trim();//検索ワード,前後の空白を削除

      if(this.searchkw !=""|this.searchkw !=null){
        this.kws=data.filter((kw) => {
          return kw.seachText.toLowerCase().includes(skw.toLowerCase());
        });
      }else{
        return data;
      }
    }
  }
  
})

  <div id="app">
    <input type="text" v-model="searchkw">
    <button v-on:click="isSearch">検索</button>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>大見出し</th>
          <th>子見出し</th>
          <th>キーワード</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(kw,index) in getList">
          <td>{{index+1}}</td>
          <td>{{kw.siryoname}}</td>
          <td>{{kw.ttl}}</td>
          <td>{{kw.keyword}}</td>
        </tr>
      </tbody>
    </table>
  </div>

[
  {
      "siryoname": "AAA",
      "ttl": "タイトルD",
      "keyword": "寺社／祭事",
      "seachText": "AAA／タイトルD／寺社／祭事"
  },
  {
      "siryoname": "BBB",
      "ttl": "タイトルE",
      "keyword": "学校／病院",
      "seachText": "BBB／タイトルE／学校／病院"
  },
  {
      "siryoname": "CCC",
      "ttl": "タイトルF",
      "keyword": "城／遺跡",
      "seachText": "CCC／タイトルF／城／遺跡"
  }
]

###補足情報
axios v0.21.1
Vue.js v2.6.12

Answer 1

検索ボタンで絞込みを行った際に、絞り込んだ後のリストをkwsに代入してしまっているためです。

動作としては、

1. 検索ワード「A」で検索する→結果は大見出し：AAAのもの1件になる。
2. 続けて、検索ワード「B」で検索する。この時、1で得られた1件の中から「B」に該当するものを探すため、検索結果はゼロ件

ということが起こってしまっています。
JSONから得られた結果全件を格納する変数と、検索結果を格納する変数を別に用意しましょう。

追記：上記の方法で修正するとしたらこのようになります。
もう1つの方法としては、「検索ボタンを押すたびにファイルをaxiosで取得する」ということがありますが、ファイルの内容が頻繁に変更される場合でなければ、通信量が増えてしまうのであまりお勧めできません。

var json_path = "./json/samp.json"; //jsonのパス

var app = new Vue({
  el: "#app",
  data: {
    kws: [], //json格納先
    filteredKws: [], //検索結果
    searchkw: "", //検索ボックスのテキスト
  },
  //jsonファイル読み込み
  created: function () {
    axios
      .get(json_path)
      .then((response) => {
        this.kws = response.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
  computed: {
    getList: function () {
      return this.filteredKws;
    },
  },
  methods: {
    //検索実行
    isSearch: function () {
      var data = this.kws; //検索データ全件
      var skw = this.searchkw.trim(); //検索ワード,前後の空白を削除

      if ((this.searchkw != "") | (this.searchkw != null)) {
        this.filteredKws = data.filter((kw) => {
          return kw.seachText.toLowerCase().includes(skw.toLowerCase());
        });
      } else {
        return data;
      }
    },
  },
});

Comments

[saru2021]

ご回答ありがとうございます。
すごく分かりやすい説明で、原因と解決方法がよくわかりました。
無事にやりたい事ができました。
下記に実際のコードを記載しておきます。

Answer 2

var json_path = "./json/samp.json"; //jsonのパス

var app = new Vue({
  el: "#app",
  data: {
    kws: [], //json格納先
    filteredKws: [], //検索結果
    searchkw: "", //検索ボックスのテキスト
  },
  //jsonファイル読み込み
  created: function () {
    axios
      .get(json_path)
      .then((response) => {
        this.kws = response.data;
        this.filteredKws = response.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
  computed: {
    getList: function () {
      return this.filteredKws;
    },
  },
  methods: {
    //検索実行
    isSearch: function () {
      var data = this.kws; //検索対象データ（全件）
      var skw = this.searchkw.trim(); //検索ワード,前後の空白を削除

      if ((this.searchkw != "") | (this.searchkw != null)) {
        this.filteredKws = data.filter((kw) => {
          return kw.seachText.toLowerCase().includes(skw.toLowerCase());
        });
      }
    },
  },
});

・初期表示時は全件表示したいので、「filteredKws」にもjsonデータを全件格納
・elseは不要なので、削除