Vue.jsで検索する過程の途中でも、結果を表示したい

Question

前提・実現したいこと

Vue.jsで、外部APIからカクテルのデータを所得し、検索するページを作っていますが、
４項目全てを入力しなければ結果が表記されない状態です。

１項目でも入力されれば、それぞれの項目に合った結果を表記したいのですが、
filter関数の使い方が今ひとつ分かりません。
どのように表記すればいいでしょうか？

勉強不足で申し訳ありませんが、回答よろしくお願いいたします。

該当のソースコード

<template>
  <div>
    <div>
      <div>ベース
        <select v-model="base_change">
          <option disabled value=""></option>
          <option value="ノンアルコール">ノンアルコール</option>
          <option value="ジン">ジン</option>
          <option value="ウォッカ">ウォッカ</option>
          <option value="テキーラ">テキーラ</option>
          <option value="ラム">ラム</option>
          <option value="ウイスキー">ウイスキー</option>
          <option value="ブランデー">ブランデー</option>
          <option value="リキュール">リキュール</option>
          <option value="ワイン">ワイン</option>
          <option value="ビール">ビール</option>
          <option value="日本酒">日本酒</option>
        </select>
      </div>
      <div>味わい
        <select v-model="taste_change">
          <option disabled value=""></option>
          <option value="甘口">甘口</option>
          <option value="中甘口">中甘口</option>
          <option value="中口">中口</option>
          <option value="中辛口">中辛口</option>
          <option value="辛口">辛口</option>
        </select>
      </div>
      <div>スタイル
        <select v-model="style_change">
          <option disabled value="" ></option>
          <option value="ショート">ショート</option>
          <option value="ロング">ロング</option>
        </select>
      </div>
      <div>技法
        <select v-model="technique_change">
          <option disabled value=""></option>
          <option value="ビルド">ビルド</option>
          <option value="ステア">ステア</option>
          <option value="シェイク">シェイク</option>
          <option value="ブレンド">ブレンド</option>
        </select>
      </div>
    </div>
    <button v-on:click="show">注文</button>
      <modal name="modal-test" :draggable="false" :resizable="false" :scrollable="true" width="85%" height="auto">
        <div v-for="(cocktail,key) in cocktailSelect" :key="key">
          <small>{{cocktail.cocktail_digest}}</small><br>
          <u>{{cocktail.cocktail_name}}</u>
          <div>
            <div>{{cocktail.base_name}}</div>
            <div>Taste</div><div>{{cocktail.taste_name}}</div>
          </div>
        <div>
          <div>Style</div><div>{{cocktail.style_name}}</div>
          <div>Alc.</div><div>{{cocktail.alcohol}}%</div>
        </div>
        <h1>{{cocktail.cocktail_desc}}</h1>
        </div>
      </modal>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  data() {
    return{
      base_change:'',
      taste_change:'',
      style_change:'',
      technique_change:'',
      cocktails: [],
    }
  },
  computed: {
    cocktailSelect: function() {
      return this.cocktails.filter(
        cocktails => cocktails.base_name === this.base_change 
        && cocktails.taste_name === this.taste_change 
        && cocktails.style_name === this.style_change 
        && cocktails.technique_name === this.technique_change
      );
    }
  },
  methods: {
    show : function() {
      this.$modal.show('modal-test');
    },
    hide : function () {
      this.$modal.hide('modal-test');
    },
  },
    created() {
      axios.get(
        "/api/v1/cocktails?limit=100"
        )
    .then(response => {
      console.log(response);
      this.cocktails = response.data.cocktails;
      })
    },
  }
</script>

補足情報（FW/ツールのバージョンなど）

vue-js-modalを実装して、結果がそちらに表記されるようにしています。

Answer 1

現状だとA&B&C&Dが条件になっているので、最低一つだけ操作して、検索を表示させるには、それぞれのプルダウンの値に対してメソッドか算出プロパティで紐付ければ大丈夫かと思います。

computed:{
  base_change:function(){
    //フィルタリングする
  },
  taste_change:function(){
　　 //フィルタリングする
  },
  style_change:function(){
　　//フィルタリングする
  },
  technique_change:function(){
　　//フィルタリングする
  },
},

あとは検索条件がorかandによってcooktailSelectの値の制御が変わってきます。andで絞り込んでいく場合は、算出プロパティにも一度算出済のcooktailSelectを代入して、それをフィルタリングしていきます。

Answer 2

４項目全てを入力しなければ結果が表記されない状態です

    cocktailSelect: function() {
      return this.cocktails.filter(
        cocktails => cocktails.base_name === this.base_change 
        && cocktails.taste_name === this.taste_change 
        && cocktails.style_name === this.style_change 
        && cocktails.technique_name === this.technique_change
      );
    }

画面を開き、base_changeだけ変更したとき、taste_changeの値はなんですか?
cocktails.taste_name に、その taste_change と一致するものは存在するのですか?

this.taste_change === '' の場合(初期値の場合)を考慮する必要があるのではないですか。