javascript - 通过复选框vue js过滤产品
问题描述
我正在尝试在 laravel 中使用 vue js 实现复选框过滤器,但它没有按预期工作。对于第一个复选框 All ,当我选中和取消选中复选框时,它可以工作并显示/隐藏所有产品。但是对于科技、娱乐和小说,它不会根据单击的复选框来过滤产品。
<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>
任何帮助,将不胜感激
解决方案
我的猜测是category_id
数组products
的类型为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>
推荐阅读
- java - Spring Boot 应用程序缓存 TLS 握手以在 30 秒后不丢弃
- hibernate - 实体类未映射:尝试在单个查询中加入主实体类和租户实体类以获得加入结果时
- dns - 在领事集群设置中使用 systemd-resolved 进行 DNS 转发
- python-tesseract - 将 pytesseract 与旧版引擎一起使用的可维护方式?
- html - 我怎样才能让我的导航栏链接(关于、服务、项目)“停止在屏幕外运行”-让它停止?
- azure - Azure 企业级登陆区域架构的实际实现是什么?
- outlook - 使用 Microsoft Graph API 创建只读日历事件
- snowflake-cloud-data-platform - 如何将 varchar 列与数值进行比较
- r - 如何将 gtsummary 表保存为 tiff
- python - 如何创建 PDF 文件并用 django 打开它们