Vue如何得到分类ID传到商品列表?
当你点击分类的时候,你会获得分类ID,然后传递到产品列表,并按分类显示对应的产品。我知道以前做过jquery选项卡列表页功能,但第一次用vue做选项卡功能,实现这个功能需要一个计算categoryProducts阵列由分类ID。
HTML文件:
<div id="app">
<ul>
<li @click="toggle(item.category_id,item.category_name)" v-for="item in category" :class="{active: active == item.category_id}">{{ item.category_name }}</li>
</ul>
<br>
<div class="layui-tab-content">
<ul>
<li v-for="item in categoryProducts">
{{item.goods_name}}
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
CSS文件:
.active {
color: red;
border-bottom: 1px solid red;
}
ul li {
padding: 0 15px;
float: left;
list-style: none;
}
JavaScript文件:
var vm = new Vue({
el: '#app',
data: {
currentView: 'child1',
active: '1',
category: [{
category_id: "1",
category_name: "Apple"
}, {
category_id: "2",
category_name: "Xiaomi"
}],
products: [
{
category_id: "1",
goods_name: "iphone6s",
}, {
category_id: "1",
goods_name: "macbook pro"
}, {
category_id: "2",
goods_name: "hongmi5 Plus"
}
]
},
computed: {
categoryProducts () {
let that = this
return this.products.filter(p => p.category_id === that.active)
}
},
methods: {
toggle(i, v) {
this.active = i
console.log(i)
//this.currentView = v
}
}
})
最终效果图: