vue.cliにてリアルタイム検索を実装したい

Question

飲食店の予約システムをvue.cliにて実装中です。店舗一覧ページにてユーザーが検索フォームに値を入力した際、検索条件が店舗データと合うものだけを表示したいと思っております(indexOfを使用しております)。
検索フォームには①エリアで検索（東京・大阪・福岡）　②ジャンルで検索（寿司・焼肉・居酒屋・イタリアン・ラーメン） ③検索キーワードから検索　の3点から検索可能です。①、②はselectタグ、③はinputタグを使用中です。

＊現状
③のinputタグから店名を入力すると反映されますが、①②でエリアやジャンルを選択しても反映されません。
（店舗データはテストで入れてるだけですので5つ程度しか入っておりません）

＊試したこと
select>optionタグ内のvalueの値とscript内のdata()の値を同じにしてみましたが反映されませんでした。

ご教授頂けますと幸いです。

<template>
  <div class="home">
    <div class="flex">
      <div class="header left">
        <commonHeader />
      </div>
      <div class="search-container right">
        <div class="flex">
          <select name="shopsArea" id="" v-model="searchArea">
            <option value="">エリアで検索</option>
            <option value="東京">東京</option>
            <option value="大阪">大阪</option>
            <option value="福岡">福岡</option>
          </select>
          <select name="shopsGenre" id="" v-model="searchGenre">
            <option value="">ジャンルで検索</option>
            <option value="sushi">寿司</option>
            <option value="yakiniku">焼肉</option>
            <option value="izakaya">居酒屋</option>
            <option value="italian">イタリアン</option>
            <option value="ra-men">ラーメン</option>
          </select>
          <input type="text" v-model="searchWords" placeholder="検索">
        </div>
      </div>
    </div>
    <div class="shops" id="shop-flex">
      <div class="shop" v-for="shop in filteredShops" :key="shop.id">
        <img :src="shop.url">
        <div class="shop-info">
          <p class="shop-name">{{ shop.name }}</p>
          <div class="area-genre">
            <span class="shop-area">#{{ shop.area }}</span>
            <span class="shop-genre">#{{ shop.genre }}</span>
          </div>
          <div class="flex">
            <button @click="shopDetail(shop.id)">詳しく見る</button>
            <div class="LikesIcon" @click.stop="toggleHeart(100)">
              <i class="fa-heart LikesIcon-fa-heart" :class="{ heart: isActive , fas: isActive ,far: !isActive }"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonHeader from '../components/commonHeader';
export default {
  data() {
    return {
      searchArea: '',
      searchGenre: '',
      searchWords: '',
      isActive: false,
      shops: [
        {
          id: 1,
          name: '仙人',
          area: '東京',
          genre: '寿司',
          url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
        },
        {
          id: 2,
          name: '仙人',
          area: '大阪',
          genre: '焼肉',
          url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
        },
        {
          id: 3,
          name: '仙人',
          area: '福岡',
          genre: 'イタリアン',
          url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
        },
        {
          id: 4,
          name: '仙人',
          area: '東京',
          genre: '寿司',
          url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
        },
        {
          id: 5,
          name: '仙人',
          area: '大阪',
          genre: '寿司',
          url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
        },
      ],
    };
  },
  components: {
    commonHeader
  },
  methods: {
    toggleHeart() {
      if (!this.isActive) {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
    },
    shopDetail(shop_id) {
      this.$router.push({path: '/shopdetail/'+ shop_id, params:{shop_id:shop_id}});
    }
  },
  computed: {
    filteredShops() {
      const shopsArray = [];
      for (const i in this.shops) {
        const shop = this.shops[i];
        if (shop.area.indexOf(this.searchArea) !== -1 ||
        shop.genre.indexOf(this.searchGenre) !== -1 ||
        shop.name.indexOf(this.searchWords) !== -1) {
          shopsArray.push(shop);
        }
      }
      return shopsArray;
    }
  }
};
</script>

Answer 1

良いやり方ではないかもしれませんが、computedの再計算タイミングが、一度計算したものをキャッシュしてしまうので
methodsに入れることで解決できるかと思います。

Comments

[abrt29]

返事が遅くなり申し訳ございません。
試してみたのですが、実行できないどころかfor文で表示させた店舗一覧も消えてしまいました。
以下、追記です。
inputタグからだと表示できると思っておりましたが、今試したらうまくいきませんでした。

[m2l]

説明不足で申し訳ございません。
@inputでmethodsを呼び出すところをお答えできておりませんでした。
コメントの中で恐縮ではございますが、下記をイメージしております。

---
<template>
<div class="home">
<div class="flex">
<div class="header left">
<commonHeader />
</div>
<div class="search-container right">
<div class="flex">
<select name="shopsArea" @input="filteredShops" id="" v-model="searchArea">
<option value="">エリアで検索</option>
<option value="東京">東京</option>
<option value="大阪">大阪</option>
<option value="福岡">福岡</option>
</select>
<select name="shopsGenre" @input="filteredShops" id="" v-model="searchGenre">
<option value="">ジャンルで検索</option>
<option value="sushi">寿司</option>
<option value="yakiniku">焼肉</option>
<option value="izakaya">居酒屋</option>
<option value="italian">イタリアン</option>
<option value="ra-men">ラーメン</option>
</select>
<input type="text" v-model="searchWords" @input="filteredShops" placeholder="検索">
</div>
</div>
</div>
<div class="shops" id="shop-flex">
<div class="shop" v-for="shop in filteredShops" :key="shop.id">
<img :src="shop.url">
<div class="shop-info">
<p class="shop-name">{{ shop.name }}</p>
<div class="area-genre">
<span class="shop-area">#{{ shop.area }}</span>
<span class="shop-genre">#{{ shop.genre }}</span>
</div>
<div class="flex">
<button @click="shopDetail(shop.id)">詳しく見る</button>
<div class="LikesIcon" @click.stop="toggleHeart(100)">
<i class="fa-heart LikesIcon-fa-heart" :class="{ heart: isActive , fas: isActive ,far: !isActive }"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import commonHeader from '../components/commonHeader';
export default {
data() {
return {
searchArea: '',
searchGenre: '',
searchWords: '',
isActive: false,
shops: [
{
id: 1,
name: '仙人',
area: '東京',
genre: '寿司',
url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
},
{
id: 2,
name: '仙人',
area: '大阪',
genre: '焼肉',
url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
},
{
id: 3,
name: '仙人',
area: '福岡',
genre: 'イタリアン',
url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
},
{
id: 4,
name: '仙人',
area: '東京',
genre: '寿司',
url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
},
{
id: 5,
name: '仙人',
area: '大阪',
genre: '寿司',
url: 'https://coachtech-matter.s3-ap-northeast-1.amazonaws.com/image/sushi.jpg'
},
],
};
},
components: {
commonHeader
},
methods: {
toggleHeart() {
if (!this.isActive) {
this.isActive = true;
} else {
this.isActive = false;
}
},
shopDetail(shop_id) {
this.$router.push({path: '/shopdetail/'+ shop_id, params:{shop_id:shop_id}});
},
filteredShops() {
// forループでも大丈夫です
const shopsArray = this.shops.filter(
v => v.area.indexOf(this.searchArea) !== -1 || v.genre.indexOf(this.searchGenre) !== -1 || v.name.indexOf(this.searchWords) !== -1
);
return filteredShops;
}
},
};
</script>
---

[abrt29]

m2lさん。
ご教授いただいていたのに今気づきました。申し訳ございません。
私なりに調べてif文の中身を||ではなく&&という風に条件を変えて実装したところ無事解決に至りました！
inputを使用したり等は初めて知れたので試行錯誤しながら精進したいと思います！
ご教授いただきありがとうございました！

[m2l]

上手い回答ができず、申し訳ございませんでした。
解決できて、良かったです！