我創(chuàng)建了一個演示網(wǎng)站來向客戶銷售產(chǎn)品。該網(wǎng)站使用過濾器/搜索/排序等來輕松瀏覽不同的產(chǎn)品。我遇到的問題與過濾和搜索有關。我想讓我的過濾器能夠處理搜索結(jié)果。我嘗試使用 Vue 中的復選框和計算屬性來實現(xiàn)此目的。超文本標記語言<div id="app"> <h5>Search</h5> <input type="text" v-model="search" placeholder="Search title.."/><br><br> <h5>Filter</h5> <li v-for="filter in possibleFilters" :key="filter"> <label> <input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)"> <span >{{filter}}</span> </label> </li> <div class="block" v-for="(product, index) in filteredSearch"> <hr> <h3>{{product.name}}</h3> <p>Price: ￡{{product.price}}</p> <p>Location: {{product.location}}</p> <hr></div></div>JavaScriptnew Vue({ el: "#app", data: { filters: [], search: "", products: [{ name: "milk", location: "London", price: 100 }, { name: "oranges", location: "Birmingham", price: 80 }, { name: "apples", location: "Edinburgh", price: 90 }, { name: "bananas", location: "Paris", price: 120 }, { name: "bread", location: "Paris", price: 110 }, { name: "water", location: "Oslo", price: 90 },問題是我無法多次選擇過濾器。過濾器基于位置，我的目標是能夠多次應用過濾器。目前我一次只能選擇一個過濾器。即，如果我搜索“l(fā)”，它會返回牛奶和蘋果，過濾器顯示倫敦和愛丁堡，我只能選擇倫敦或愛丁堡，但不能同時選擇兩者。如果我選擇倫敦，它應該只顯示“牛奶”，同時仍然顯示“愛丁堡”選項，當我選擇兩者時，它應該顯示“牛奶”和“蘋果”顯示問題的小提琴： https ://jsfiddle.net/Calv7/L1vnqh63/9/任何幫助將不勝感激。謝謝。
3 回答
LEATH
TA貢獻1936條經(jīng)驗 獲得超7個贊
這能解決您的問題嗎？
possibleFilters() {
return [...new Set(this.products.map(x => x.location))]
},
Qyouu
TA貢獻1786條經(jīng)驗 獲得超11個贊
這是一個基于您的小提琴的快速而骯臟的解決方案。只是為了讓您了解如何分離兩個過濾器。嘗試這里的解決方案https://jsfiddle.net/4839spkx/
possibleFilters() {
// we have some input, so show all location filters available in the filtered by input products
if (this.search) {
const filteredByInput = this.products.filter(p => p.name.includes(this.search.toLowerCase()))
return [...new Set(filteredByInput.map(p => p.location))]
}
return [...new Set(this.filteredSearch.map(x => x.location))]
},
泛舟湖上清波郎朗
TA貢獻1818條經(jīng)驗 獲得超3個贊
由于您使用計算屬性從過濾的產(chǎn)品位置動態(tài)生成可能的過濾器，因此每次更新過濾的產(chǎn)品時都會更新。我建議您創(chuàng)建一個新數(shù)組并用您的數(shù)據(jù)填充該數(shù)組。
HTML：
...
<li v-for="filter in possibleFiltersArr" :key="filter">
<label>
<input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)">
<span>{{filter}}</span>
</label>
</li>
...
JS
...
data: {
posibleFiltersArr:[],
...
created(){
this.possibleFiltersArr=[...new Set(this.filteredSearch.map(x => x.location))]
},
...
您可以在方法中設置此數(shù)組created()，并且可以在搜索框中輸入一些文本后更新此數(shù)組。
- 3 回答
- 0 關注
- 215 瀏覽
添加回答
舉報
0/150
提交
取消