在尝试Vue.js时，我遇到了一件我不知道该怎么做的事情：过滤JSON文件的一部分。让我更好地解释一下：我正在使用一个文件Json充满电子产品，如电脑，鼠标，键盘等.我想把它们分成几类：- 电脑电脑在这里... - 外围设备外围设备在这里. - 这里有监视器... -Ecc...
现在，为了展示产品，我创建了一个文件“Card.vue”：

<script setup>
import { defineProps } from "vue"

const { product } = defineProps(["product"])
import {RouterLink} from "vue-router"

</script>
<template>
    <div class="card col-4 text-center center">
        <RouterLink :to="product.ref + product.id">
            <!--   -->
        <div class="img">
            <img :src="product.img" alt="">

        </div>
            
        <div class="card-text">
            <h2>{{ product.name }}</h2>
            <p>{{ product.description }}</p>
        </div>
        </RouterLink>
    </div>
</template>
<style scoped>
    .card{
        overflow: hidden;
        border-radius: 0%;
        /* margin-right: 5px;
        margin-bottom: 5px; */
        box-shadow: 1px 1px 10px red;
        cursor: pointer;
    }
    .card .img{
        width: 300px;
        height: 300px;
        margin: 0;
    } 
    .card img{
        width: 100%;
        height: 100%;
    }
    .center{
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

然后我创建了主页“HomeView.vue”。现在我被困在这里了我不知道如何使用某种类型的过滤器...我尝试了这样的东西：<Card v-for="(prod, type) in product" v-if="type=='computer'" :key="prod.id" :product="prod"/>
这是我的文件JSON的模板：

{
    "id": 1,
    "name": "Computer number 1",
    "price": 1699.99,
    "type": "computer"
},
{
    "id": 8,
    "name": "Microphone",
    "price": 79.99,
    "type": "peripherals"
 },
 {
    "id": 11,
    "name": "Monitor 75hz",
    "price": 129.99,
    "type": "monitor"
}

谢谢你！