[英]Filter product by checkbox vue js
我正在尝试在 laravel 中使用 vue js 实现复选框过滤器,但它没有按预期工作。 对于第一个复选框 All ,当我选中和取消选中复选框时,它可以工作并显示/隐藏所有产品。 但对于 Tech、Entertainment 和 Fictional,它不会根据点击的复选框过滤产品。
<template>
<div class="container">
<div class="row ">
<div class="col-md-4">
<div class="filter">
<label><input type="checkbox" v-model="selectedCategory" value="0" /> All</label>
<label><input type="checkbox" v-model="selectedCategory" value="1" /> Tech</label>
<label><input type="checkbox" v-model="selectedCategory" value="2" /> Entertainment</label>
<label><input type="checkbox" v-model="selectedCategory" value="3" /> Fictional</label>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card" v-for="product in filteredProduct">
<div class="card-header">{{product. name}}</div>
<div class="card-body">
<img :src="product.image">
<p>{{product.price}}</p>
<p>{{product.category_id}}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data:function(){
return {
products:[],
selectedCategory: ["0"],
}
},
computed: {
filteredProduct: function() {
var app = this;
var category = app.selectedCategory;
console.log(category)
if(category.includes("0")) {
return app.products;
} else {
return app.products.filter(function(p) {
return category.includes(p.category_id);
});
}
}
},
mounted() {
console.log('Product mounted.')
var app = this;
axios.get('/products')
.then(function (resp) {
app.products = resp.data;
})
.catch(function (resp) {
console.log(resp);
alert("Could not load");
});
}
}
</script>
任何帮助,将不胜感激
我的猜测是products
数组中的category_id
类型为number 。 但是, selectedCategory
数组具有字符串格式的数字。 includes
使用严格相等来检查提供的值是否存在于数组中。 这就是它适用于"0"
原因,因为它是作为字符串提供的。 如果将其更改为p.category_id.toString()
,它将起作用:
这是一个工作片段:
new Vue({ el: '#app', data: function() { return { products: [{ category_id: 1, name: "Tech 1" }, { category_id: 1,name: "Tech 2"},{ category_id: 2, name: "Entertainment 1" },{ category_id: 3, name: "Fictional 1" }], selectedCategory: ["0"], } }, computed: { filteredProduct: function() { const app = this, category = app.selectedCategory; if (category.includes("0")) return app.products; else return app.products.filter(p => category.includes(p.category_id.toString()) ); } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="container" id="app"> <div class="row "> <div class="col-md-4"> <div class="filter"> <label><input type="checkbox" v-model="selectedCategory" value="0" /> All</label> <label><input type="checkbox" v-model="selectedCategory" value="1" /> Tech</label> <label><input type="checkbox" v-model="selectedCategory" value="2" /> Entertainment</label> <label><input type="checkbox" v-model="selectedCategory" value="3" /> Fictional</label> </div> </div> </div> <div class="col-md-8"> <div class="card" v-for="product in filteredProduct"> <div class="card-header">{{product. name}}</div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.