我坚持使用 vuejs 中的 vuetify 过滤 vcard。我的过滤器按钮不起作用。我已经尝试了所有方法，但没有成功。这是项目链接。请帮忙。该项目看起来像这样。 https://drive.google.com/open?id=1ugtNvCtG8tFnu3ZZgttPHfWe3VDAUPM
2 回答
慕虎7371278
TA贡献1802条经验 获得超4个赞
您必须在每个项目中都有一个属性来过滤它。
并与v-if进行比较
<template>
<div>
<div id="filters">
<button @click="setFilter('A')">A</button>
<button @click="setFilter('B')">B</button>
<button @click="setFilter('C')">C</button>
</div>
<div v-for="item in items" :key="item.id" v-if="filter===item.filter || filter==='ALL'">
{{item.id}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
filter: 'A'
},
{
id: 2,
filter: 'B'
}
],
filter: 'ALL'
}
},
methods: {
setFilter(filterName) {
this.filter = filterName
}
}
}
</script>
慕尼黑5688855
TA贡献1848条经验 获得超2个赞
您需要filter()根据点击的按钮使用
请检查以下工作代码片段
const projects = [{
ids: '5',
cate: 'Technical',
title: 'Top 10 Australian beaches',
date: 'November 10',
name: 'Whitehaven Beach',
place: 'Whitsunday Island, Whitsunday Islands',
sorce: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg'
},
{
ids: '5',
cate: 'Sports',
title: 'Top 10 Australian beaches',
date: 'November 21',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
},
{
ids: '1',
cate: 'Music',
title: 'Top 10 Australian beaches',
date: 'December 22',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
},
{
ids: '2',
cate: 'Creative',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
},
{
ids: '5',
cate: 'Sports',
title: 'Top 10 Australian beaches',
date: 'November 25',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
},
{
ids: '1',
cate: 'Music',
title: 'Top 10 Australian beaches',
date: 'November 22',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
},
{
ids: '1',
cate: 'Adventure',
title: 'Top 10 Australian beaches',
date: 'November 12',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
},
{
ids: '5',
cate: 'Sports',
title: 'Top 10 Australian beaches',
date: 'December 23',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
},
{
ids: '1',
cate: 'Music',
title: 'Top 10 Australian beaches',
date: 'November 17',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
},
{
ids: '1',
cate: 'Adventure',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
},
{
ids: '5',
cate: 'Sports',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
},
{
ids: '1',
cate: 'Music',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
},
{
ids: '2',
cate: 'Creative',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
},
{
ids: '5',
cate: 'Sports',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
},
{
ids: '1',
cate: 'Music',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
},
{
ids: '2',
cate: 'Creative',
title: 'Top 10 Australian beaches',
date: 'November 20',
name: 'Whitehaven Beach',
place: 'Block 15, Near Tuck Shop',
sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
},
];
new Vue({
el: '#app',
methods: {
filter(event){
if(event.target.innerText.toLowerCase() != 'all'){
console.log(this.projects.filter(({cate})=>cate.toLowerCase() == event.target.innerText.toLowerCase()));
} else{console.log(this.projects)}
}
},
data: {
projects:projects
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="filter($event)" class="ma-2" outlined color="indigo">All</button>
<button @click="filter($event)" class="ma-2" outlined color="indigo">Adventure</button>
<button @click="filter($event)" class="ma-2" outlined color="indigo" @click="filter($event)" >Creative</button>
<button class="ma-2" outlined color="indigo" @click="filter($event)" >Entertainment</button>
<button @click="filter($event)" class="ma-2" outlined color="indigo">Startups</button>
<button @click="filter($event)" class="ma-2" outlined color="indigo">Gaming </button>
<button @click="filter($event)" class="ma-2" outlined color="indigo">Technical</button>
<button class="ma-2" outlined color="indigo" @click="filter($event)">Sports</button>
</div>
添加回答
举报
0/150
提交
取消