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; } } })
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/18 01:10
2020/02/18 03:28
2020/02/18 04:19
2020/02/18 05:36
2020/02/18 09:21
2020/02/18 11:26
2020/02/18 12:25
2020/02/18 14:39
2020/02/18 14:43