vueでチェックボックスを使用して絞り込み機能を実装する方法がわからない

Question

VueでチェックボックスによるORの検索機能を実装しました。
（機能：各都市にチェックを付け件数が増えていく）

そのチェックした件数に対して、チェックボックスによる絞り込み機能を実装していきたいと思っているのですがやり方がわかりません。

現状のコード

    <div id="app">
      <p>都市名を選択してください</p>
      <table class="table">
        <tbody>
          <tr>
            <td>
              <input type="checkbox" v-model="show1" />
            </td>
            <td>東京</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" v-model="show2" />
            </td>
            <td>大阪</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" v-model="show3" />
            </td>
            <td>名古屋</td>
          </tr>
        </tbody>
      </table>
      <p>特徴を選択してください</p>
      <div><input type="checkbox" v-model="show4" />居酒屋</div>
      <div><input type="checkbox" v-model="show5" />イタリアン</div>
      <div><input type="checkbox" v-model="show6" />ラーメン屋</div>

      <p>{{this.filteredList.length}}件</p>
    </div>

    <script src="https://unpkg.com/vue@2.5.17"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          dataList: [
            { id: 121, city: "Osaka", preference: "1" },
            { id: 123, city: "Fukuoka", preference: "1" },
            { id: 425, city: "Osaka", preference: "1" },
            { id: 645, city: "Tokyo", preference: "1" },
            { id: 326, city: "Osaka", preference: "1" },
            { id: 876, city: "Tokyo", preference: "1" },
            { id: 456, city: "Osaka", preference: "2" },
            { id: 335, city: "Osaka", preference: "2" },
            { id: 471, city: "Tokyo", preference: "2" },
            { id: 345, city: "Osaka", preference: "2" },
            { id: 857, city: "Fukuoka", preference: "2" },
            { id: 455, city: "Osaka", preference: "3" },
            { id: 997, city: "Osaka", preference: "3" },
            { id: 121, city: "Tokyo", preference: "3" },
            { id: 115, city: "Osaka", preference: "3" },
            { id: 668, city: "Fukuoka", preference: "3" }
          ],
          show1: false,
          show2: false,
          show3: false,
          show4: false,
          show5: false,
          show6: false
        },
        computed: {
          filteredList: function() {
            //  絞り込み機能

            var newList = [];

            for (var i = 0; i < this.dataList.length; i++) {
              var isShow = false;

              if (this.show1 && this.dataList[i].city == "Tokyo") {
                isShow = true;
              }
              if (this.show2 && this.dataList[i].city == "Osaka") {
                isShow = true;
              }
              if (this.show3 && this.dataList[i].city == "Fukuoka") {
                isShow = true;
              }

              // ここからのコードの記載がわからない
              // 下記のようにすると、特徴が何も選択されていないと件数が0件になってしまう

              if (!this.show4 && this.dataList[i].preference == "1") {
                isShow = false;
              }
              if (!this.show5 && this.dataList[i].preference == "2") {
                isShow = false;
              }
              if (!this.show6 && this.dataList[i].preference == "3") {
                isShow = false;
              }

              if (isShow) {
                newList.push(this.dataList[i]);
              }
            }
            return newList;
          }
        }
      });
    </script>

Comments

[yambejp]

都市の中でor,特徴の中でor,都市と特徴についてはandで良いのですか？
また検索件数だけ更新すればよいのでしょうか？idとか表示しますか？

[tomato01]

すいません追記をさせて頂きます。

「都市」選択のチェックボックス：OR検索
「特徴」選択のチェックボックス：AND検索　※都市で選択をした表示結果もとに絞り込む形

検索件数だけ表示でidとかは表示しない予定です。

[ku__ra__ge]

都市で選択をした表示結果もとに、チェックされている特徴のもので絞り込むことが要件なら「特徴が何も選択されていないと件数が0件になってしまう」のは正常な動作ではないでしょうか。
希望とする動作が仕様として拾い切れていないのでは？

[yambejp]

特徴が一つもチェックがついていないときは0件で大丈夫ですか？

[tomato01]

特徴が一つもチェックがついていないとき、選択件数を実際の件数で表示させたいです。尚、「特徴」チェックボックスをセレクトボックスに変更した場合は、思った動作ができていました。

今回のような機能を実装する場合、通常はどのような実装が使われるのでしょうか。

Answer 1

こんな感じですかね？

Comments

[yambejp]

filteredList: function() {
return this.dataList.filter(x=>{
return (
this.show1 && x.city=="Tokyo" ||
this.show2 && x.city=="Osaka" ||
this.show3 && x.city=="Fukuoka" ) && (
this.show4 && x.preference=="1" ||
this.show5 && x.preference=="2" ||
this.show6 && x.preference=="3"
);
});
}

[tomato01]

ご回答を頂き誠にありがとうございます。
教えていただいたコードで「特徴のチェックボックスにチェックがついた状態の動作」としては正しくなったのですが、「都市」のどれかがチェックされ、かつ「特徴」のチェックが何もついていない場合、表示件数が0になってしまいます。（希望では都市だけチェックがついている時でも件数を表示させたいです。）

すみません、私の考えていることは設計上不可能なのでしょうか。
（例えば、一度絞り込んだ結果を新しい配列にして絞り込みをかけるみたいなことで可能でしょうか）

[yambejp]

なるほど、条件式をこうしてください

this.show1 && x.city=="Tokyo" ||
this.show2 && x.city=="Osaka" ||
this.show3 && x.city=="Fukuoka" ) && (
this.show4 && x.preference=="1" ||
this.show5 && x.preference=="2" ||
this.show6 && x.preference=="3" ||
(!(this.show4 | this.show5 | this.show6))

[tomato01]

教えていただいたコードで思った動きになりました！！ありがとうございます。
簡単にで結構なのでどういうような流れになっているのか教えて頂けますとありがたいです。
（自分でもコードは確認します）

[yambejp]

都市の絞り込みはわかりますよね？
それにand条件で特徴のorを絞り込んで
例外処理としてshow4,show5,show6の論理和をとってます
つまりshow4-6の何かがtrueだったらtrue,全てがfalseだったらfalse
その条件をnot(!)で引っ繰りかえして、show4-6にチェックがないときは
trueになる・・・という流れです

[tomato01]

とても勉強になりました！ありがとうございます。論理和の使い方など私はまだまだ知らないことだらけですのでさらに勉強していこうと思います。
ありがとうございました。