通过 vuejs 中的特定名称过滤 vcard

Question

我坚持使用 vuejs 中的 vuetify 过滤 vcard。我的过滤器按钮不起作用。

我已经尝试了所有方法，但没有成功。

这是项目链接。请帮忙。该项目看起来像这样。 https://drive.google.com/open?id=1ugtNvCtG8tFnu3ZZgttPHfWe3VDAUPM

Answer 1

您必须在每个项目中都有一个属性来过滤它。并与v-if进行比较<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="filters">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="setFilter('A')">A</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="setFilter('B')">B</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="setFilter('C')">C</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div v-for="item in items" :key="item.id" v-if="filter===item.filter || filter==='ALL'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item.id}}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></template><script>export default {&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: 'A'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: 'B'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: 'ALL'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; setFilter(filterName) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.filter = filterName&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}</script>

Answer 2

您需要filter()根据点击的按钮使用请检查以下工作代码片段const projects = [{&nbsp; &nbsp; ids: '5',&nbsp; &nbsp; cate: 'Technical',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 10',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Whitsunday Island, Whitsunday Islands',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '5',&nbsp; &nbsp; cate: 'Sports',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 21',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Music',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'December 22',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '2',&nbsp; &nbsp; cate: 'Creative',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '5',&nbsp; &nbsp; cate: 'Sports',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 25',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Music',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 22',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Adventure',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 12',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '5',&nbsp; &nbsp; cate: 'Sports',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'December 23',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Music',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 17',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Adventure',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '5',&nbsp; &nbsp; cate: 'Sports',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Music',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '2',&nbsp; &nbsp; cate: 'Creative',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '5',&nbsp; &nbsp; cate: 'Sports',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '1',&nbsp; &nbsp; cate: 'Music',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'&nbsp; },&nbsp; {&nbsp; &nbsp; ids: '2',&nbsp; &nbsp; cate: 'Creative',&nbsp; &nbsp; title: 'Top 10 Australian beaches',&nbsp; &nbsp; date: 'November 20',&nbsp; &nbsp; name: 'Whitehaven Beach',&nbsp; &nbsp; place: 'Block 15, Near Tuck Shop',&nbsp; &nbsp; sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'&nbsp; },];new Vue({&nbsp; el: '#app',&nbsp; methods: {&nbsp; &nbsp; filter(event){&nbsp; &nbsp; if(event.target.innerText.toLowerCase() != 'all'){&nbsp; &nbsp; console.log(this.projects.filter(({cate})=>cate.toLowerCase() == event.target.innerText.toLowerCase()));&nbsp; &nbsp; }&nbsp; else{console.log(this.projects)}&nbsp; &nbsp; }&nbsp; },&nbsp; data: {&nbsp; &nbsp; projects:projects&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <button @click="filter($event)" class="ma-2" outlined color="indigo">All</button>&nbsp; <button @click="filter($event)" class="ma-2" outlined color="indigo">Adventure</button>&nbsp; <button&nbsp; @click="filter($event)" class="ma-2" outlined color="indigo" @click="filter($event)" >Creative</button>&nbsp; <button class="ma-2" outlined color="indigo" @click="filter($event)" >Entertainment</button>&nbsp; <button @click="filter($event)" class="ma-2" outlined color="indigo">Startups</button>&nbsp; <button @click="filter($event)" class="ma-2" outlined color="indigo">Gaming </button>&nbsp; <button @click="filter($event)" class="ma-2" outlined color="indigo">Technical</button>&nbsp; <button class="ma-2" outlined color="indigo" @click="filter($event)">Sports</button></div>