我想使用vue.js进行产品过滤，该过滤器可以根据最低价格或最高价格，颜色和产品类型进行过滤。实际上，我想像这样对产品进行过滤：IMAGE PRODUCT FILTER HERE
我想到了从这里制作这样的过滤器产品的想法：link
我的产品数据：
Array（5）0：base_color：“ 000000”类别：“ T-SHIRT” id：3 图片：“ ss18-1_000000_r11xw_crafted-pride-navy-ss18-2.jpg” 名称：“ ChatimeMidnight Sale 2017年12月”价格：123 product_code：“ ss18-1” product_color_id：3状态：1库存：“ 2” 体重：123123
Vue.js代码
<script type="text/javascript">
const product_list = new Vue({
el:"#product-list",
data:{
filterBox:false,
dataFilter:{
soryBy:"",
base_color:[],
category:[]
},
isActive: false,
products:{!! $products->toJson() !!},
productcolors:{!!$productcolors->toJson()!!},
categories:{!!$categories->toJson()!!},
inputSearch:'',
},
mounted(){
console.log(this.products);
},
computed:{
filteredProduct:function(){
//I DONT KNOW HOW TO USE OBJECT FOR FILTERING
}
},
methods:{
filterbtn()
{
if (this.filterBox == false) {
this.filterBox = true;
}else {
this.filterBox = false;
}
},
sortBy:function(e){
this.dataFilter.soryBy = e.target.value;
},
colorFilter:function(e){
let data = e.target.getAttribute('data-attr');
this.dataFilter.base_color.push(data);
},
productTypeFilter:function(e){
let data = e.target.getAttribute('data-attr');
this.dataFilter.category.push(data);
},
deleteProduct:function(product_id,product_color_id){
axios.delete('/admin/product/delete/'+product_id+'/'+product_color_id);
},
},
});
</script>
HTML代码
<div class="product-filter-content" v-if="filterBox != false">
<div class="row">
<div class="col-md-4">
<div class="product-filter-sortby">
<ul>
<h4>Sort By</h4>
<li><label for="highest" >Highest Price
<input type="checkbox" name="" id="highest" v-on:click="sortBy" value="highest">
</label></li>
<li><label for="lowest" >Lowest Price
<input type="checkbox" name="" id="lowest" v-on:click="sortBy" value="lowest">
</label></li>
<li><label for="newest" >Newest Product
<input type="checkbox" name="" id="newest" v-on:click="sortBy" value="newest">
</label></li>
<li><label for="oldest" >Oldest Product
<input type="checkbox" name="" id="oldest" v-on:click="sortBy" value="oldest">
</label></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="product-filter-color">
<ul>
<h4>Color</h4>
<li v-for="productcolor in productcolors">
<div class="product-color-filter-div" v-bind:data-attr="productcolor.base_color" v-on:click="colorFilter" v-bind:style="{backgroundColor:'#'+productcolor.base_color}">
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="product-filter-color">
<ul>
<h4>Product Type</h4>
<li v-for="category in categories">
<div class="product-type-filter-div" v-bind:data-attr="category.category" v-on:click="productTypeFilter">
@{{category.category}}
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="pasd">
<ul>
<li>@{{dataFilter}}</li>
</ul>
</div>
</div>
过滤数据：
{“ soryBy”：“最新”，“ base_color”：[“ 000000”，“ 999999”]， “类别”：[“牛仔裤”，“衬衫”]}
到目前为止，我只能过滤数据类型是没有数组/对象的字符串
是否可以使用对象进行过滤？还是有更好的方法来产生如上图所示的输出？
如果您有关于产品过滤器的免费免费教程，请共享链接：（
答案 0 :(得分：2)
您已经具有每个过滤器的值，无需将其包装到一个对象中。
您需要使用Array.filter和Array.sort来基于每个过滤器的值来应用它们。
甚至有些库可能支持按对象排序，但是我相信它们会先循环键和值，然后应用过滤器。
PS：：在代码中，您使用Dom API来获取每个元素的值/文本。那不是一个好主意。可能您想先浏览Vue Guide: Form Input Binding。
下面是一个简单的演示：
new Vue({
el: '#app',
data() {
return {
colors: [],
sizes: [],
products: [
{name:'test1', color:'red', size:'XL'},
{name:'test2', color:'black', size:'L'},
{name:'test3', color:'red', size:'L'},
{name:'test4', color:'black', size:'XL'},
{name:'test5', color:'red', size:'L'},
{name:'test6', color:'yellow', size:'XL'},
{name:'test7', color:'black', size:'L'}
],
sortBy: 'name',
keyword: ''
}
},
computed: {
computedProducts: function () {
return this.products.filter((item) => {
return (this.keyword.length === 0 || item.name.includes(this.keyword)) &&
(this.colors.length === 0 || this.colors.includes(item.color)) &&
(this.sizes.length === 0 || this.sizes.includes(item.size))
}).sort((a, b) => {
return a[this.sortBy].toString().localeCompare(b[this.sortBy].toString())
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<p><strong>Keyword:</strong><input type="text" v-model="keyword"></p>
<p><strong>Color:</strong>
Red: <input type="checkbox" v-model="colors" value="red"/>
Black: <input type="checkbox" v-model="colors" value="black"/>
</p>
<p><strong>Size:</strong>
L: <input type="checkbox" v-model="sizes" value="L"/>
XL: <input type="checkbox" v-model="sizes" value="XL"/>
</p>
<p><strong>Sort By:</strong> <select v-model="sortBy">
<option value="name">Product Name</option>
<option value="color">Color</option>
<option value="size">Size</option>
</select>
</p>
<table border="1">
<caption>Total {{computedProducts.length}} Products</caption>
<tbody>
<tr v-for="(product, index) in computedProducts" :key="index">
<td>{{product.name}}</td>
<td>{{product.size}}</td>
<td>{{product.color}}</td>
</tr>
</tbody>
</table>
</div>