javascript - vue js中按特定名称过滤vcard

Question

我一直在使用 vuejs 中的 vuetify 过滤 vcard。我的过滤器按钮不起作用。

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

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

Answer 1

每个项目都必须有一个属性才能对其进行过滤。

并将案例与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>