Question

我正在尝试根据产品ID从json列表中创建产品的单个页面。我似乎无法启动和运行它。谁能告诉我我在这里做错了什么？我认为我要走了。

路线：

{ path: '/product/:id',
  name: 'product',
  component: () => import('./views/Product.vue')
}

Product.vue：

<template>
    <section>
        <h1>Product: {{single.title}}</h1>
        <article></article>
    </section>
</template>

<script>
import { products } from '@/assets/data.json';

export default {
    data() {
        return {
            id: this.$route.params.id,
            products
        }
    },
    computed: {
      single() {
          return this.products.filter((product) => {return product.id == this.$route.params.id});
      }
    }
}
</script>

Answer 1

过滤数组将返回一个数组。如果将this.products.filter更改为this.products.find，则应该获得一个项目。

Vue路线参数

1 个答案: