Vueで複数条件(or検索とand検索)での絞り込み検索を行う方法

Question

Vueを使った検索機能を実装中で、or検索（チェックボックス）とand検索(セレクトボタン)を併用した絞り込み方法がわかりません。

尚、or検索（チェックボックス）を使った絞り込みまでは成功しています。
今回やりたいこととしては、その検索結果から絞り込みを行いたいと考えております。

仕様
・10件の会社データがあり、エリア（東京か大阪）をチェックボックスで選択できる
・上記でチェックをつけた後、さらに徒歩（5分、10分、15分）での絞りこみを行う　　　// まだ未完成の状態

わからないこと
・セレクトボックスを実装する場合の、vueでの記述方法がわかりません
・チェックボックスで選んだ結果を反映させつつ、そこから絞り込みを行う方法がわかりません

HTML

<div id="app">
    <p>件数:{{filteredList.length}}件</p>　// 結果件数の表示
    <p>エリア</p>
    <ul div=“check”>
            <li><span>東京</span>:<input type="checkbox" v-model="show1"></li>
            <li><span>大阪</span>:<input type="checkbox" v-model="show2"></li>
    </ul>
    <p>徒歩</p>
    <select name="example">
      <option value="5">5分</option>
      <option value="10">10分</option>
      <option value="15">15分</option>
    </select>

    <div v-for="product in filteredList">　// 該当する会社名の表示
        <p>{{product.company}}</p>
    </div>
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    show1: false,
    show2: false,
    products: [
      { company: "A社", pref: "tokyo", walk: 5 },
      { company: "B社", pref: "tokyo", walk: 5 },
      { company: "C社", pref: "tokyo", walk: 5 },
      { company: "D社", pref: "tokyo", walk: 10 },
      { company: "E社", pref: "tokyo", walk: 15 },
      { company: "F社", pref: "osaka", walk: 5 },
      { company: "G社", pref: "osaka", walk: 5 },
      { company: "H社", pref: "osaka", walk: 10 },
      { company: "I社", pref: "osaka", walk: 15 },
      { company: "J社", pref: "osaka", walk: 15 },
    ]
  },

    computed: {
      filteredList: function() {
        var newList = [];
        for (var i=0; i<this.products.length; i++) {

          var isShow = false;

          if (this.show1 && this.products[i].pref == "tokyo") {

            isShow = true;
          }
          if (this.show2 && this.products[i].pref == "osaka") {

            isShow = true;
          }

          if (isShow) {
            newList.push(this.products[i]);
          }

        }

        return newList;
	}
}
})

Answer 1

select要素も、input[type="checkbox"]と同じようにv-modelを使用できます。

<template>
  <select v-model="selectedValue">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
  </select>
</template>

<script>
export default {
  data () {
    return {
      selectedValue: 5 // 下記参照
    }
  }
}
</script>

上記のようにすると、select要素のvalueと、selectedValueデータが、互いに同期するようになります。つまり、valueが更新されるとselectedValueが更新され、selectedValueが更新されるとvalueが更新されます。

画面上でoption要素を選択すると、select要素のvalueが更新され、結果としてselectedValueも更新されます。

---

チェックボックスで選んだ結果を反映させつつ、そこから絞り込みを行う方法がわかりません

こちらは、filteredListですでにshow1、show2を使ったフィルタリングを実装されているので、自力で解決可能かと思います。selectedValueの値と、各productのwalkの値を比較するif文を追加すればよいです。わからなかったら、コメントで聞いてください。

---

ちなみに、Vue.jsの公式サイトのこちらのページに、フォーム関連要素のデータバインディングの情報が載っていますので、一読されることをおすすめします。selectについては、こちらのセクションに記載されています。

---

2020/02/18 追記

こちらに動作するデモを置いておきました。
参考になれば幸いです。
動作しない場合は、コメントでお知らせください。

すいません、元のコードをコピペしてバグ直してなかったです。
@miso24さんが指摘された部分が抜けてました。
こちらは動くはずです。

Comments

[tarow]

ご回答を頂き誠にありがとうございます。
教えて頂いた点を参考に下記のようにコード書きました。

<select v-model="selectedValue">
<option value="">選択してください</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>

data: {
selectedValue: '',
}

// filteredListのforの中に下記を追加
if (this.selectedValue == this.products[i].walk) {
isShow = false;
}

上記で絞りこみは動作をしているようなのですが、実際にフィルターされる結果が実際の値と反対の結果が返ってきてしまいます。

例　東京と大阪の両方にチェックをつけセレクトで10を選んだ場合、本当は 2件の結果が正しいのですが返ってくる結果は8件となってしまいます。
if文の判定を＝＝ではなく!= にした場合、東京と大阪の両方にチェックをつけた段階では10と表示がされなくなってしまいます。

このような場合どのようにコードを変更すれば対応可能でしょうか。

宜しくお願い致します。

[NozomuIkuta]

条件に合致するものを表示するのであれば、

this.selectedValue == this.products[i].walk

の場合

isShow = false;

ではなくて

isShow = true;

ではないですか？

[tarow]

ご連絡ありがとうございます。

isShow = true;にした場合、東京と大阪の両方にチェックをつけてからセレクトで選択をしても絞り込みができない状態になってしまいます。

[miso24]

walkの値が異なっているものは表示しないようにする必要があると思います。

そうしなければ、walkの値がどうだろうと東京と大阪のチェックをつけた段階ですべて表示されるようになってしまい、絞り込みができない状態になってしまうと思われます。

[tarow]

NozomuIkuta様
デモを設置頂きありがとうございます。

すみません、東京と大阪の両方にチェックをつけセレクトで10を選んだ場合、本当は 2件の結果が正しいのですが返ってくる結果は8件となってしまいます。２が返るようするにはどうしたらいいでしょうか。

[tarow]

NozomuIkuta様
再度、デモを設置頂き誠にありがとうございます。

度々すみません、徒歩の絞りこみは意図した動きになることを確認しましたがこの状態で東京と大阪のチェックをはずしても、件数が残ってしまいます。

はじめのチェックボックスの検索結果をもとに、その値から絞りこむ場合はどうしたらいいでしょうか。

[miso24]

Nozomulkuta様のデモを改良して、ちゃんと動くようにしてみました。

デモ: https://jsfiddle.net/1kuza4s8/1/

まず初めに、徒歩で絞り込みます。そこで、条件を満たさなければcontinueでエリアでの絞り込みとリストへの追加の処理を飛ばします。

その次に徒歩で絞り込まれたものの中から、エリアで絞り込みを行います。

ポイントは、エリアでの絞り込みの条件を
this.show1 && this.products[i].pref == "tokyo" || this.show2 && this.products[i].pref == "osaka"
として、条件に合わなかった場合はisShowをfalseにすることです。
そうすることによって、「walkは一致するがprefは一致しない」という要素を取り除くことができます。

[tarow]

miso24様
ご回答を頂き誠にありがとうございます。
教えて頂いたコードで思った動作になることを確認いたしました！

NozomuIkuta様、miso24様
今回のフィルターの件でとても勉強をさせて頂きました。どうもありがとうございました！
教えて頂いたコードはさらに自分でも理解できるように勉強をしていきたいと思います。

[tarow]

尚、ベストアンサーにするボタンはNozomuIkuta様にしか押せないみたいですのでNozomuIkuta様とさせて頂きます。（ですがお二人にはとても感謝をしております。）