javascript - Vue JS中通过ID获取静态JSON单品数据

Question

我正在创建一个 Vue JS 应用程序，它将显示一个产品列表，单击该列表时将通过其 ID(通过 Vue Router 参数传递)链接到动态产品。这一点工作正常，但我需要做的是一旦该动态路线，按其 ID 显示该产品的所有数据。我对 Vue 还很陌生，并且对采取什么方法感到困惑。我认为我不需要 axios，因为这不是一个在线应用程序，因此无法访问 API。我也不知道是否需要使用 vuex。目前我正在尝试使用一种简单的方法通过路由参数传递的 ID 从 JSON 文件中获取数据。这是我到目前为止所拥有的...

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Products from './views/Products.vue'
import Product from './views/ProductSingle.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/products',
      name: 'products',
      component: Products
    },
    {
      path: '/product/:id',
      name: 'product',
      component: Product,
      props: true
    }
  ]
})

Slider.vue - 该组件在 Views/Products.vue 中调用，是链接到每个单个产品的组件

<template>
  <carousel
    :items="3"
    :loop="true"
    :center="true"
    :margin="0"
    :dots="false"
    :nav="true"
  >
    <div v-for="product in products" :key="product.productId">
      <transition name="slide">
        <router-link
          :to="{
            name: 'product',
            params: { id: product.productId }
          }"
        >
          <img src="http://lorempixel.com/100/100/city" :alt="product.name" />
          <!-- <img
            :src="require('../assets/images/sample-product/' + data.image)"
          />-->
        </router-link>
      </transition>
    </div>
  </carousel>
</template>

<script>
import json from '@/json/data.json'
import carousel from 'vue-owl-carousel'

export default {
  data() {
    return {
      products: json
    }
  },
  components: {
    carousel
  }
}
</script>

ProductSingle.vue

<template>
  <div>
    <p v-for="product in getData($route.params.id)" :key="product.productId">
      {{ product }}
    </p>
  </div>
</template>

<script>
import json from '@/json/data.json'

export default {
  data() {
    return {
      products: json
    }
  },
  methods: {
    getData(id) {
      let data = this.products
      data.filter(item => {
        return item.productId == id
      })
    }
  }
}
</script>

我在这里期望的是，我的 getData 方法将返回通过 $route.params.id 表示的 ID 处的产品数据，但没有返回任何内容。 console.log(getData($route.params.id)) 显示以下内容:

[{…}]

展开时显示 0: {__ob__: Observer} 并且如果你展开该观察者，确实会有该数据

image: (...)
name: (...)
productId: (...)

我的 data.json 文件如下所示:

[
  {
    "productId": 1,
    "name": "Test 1",
    "image": "sample.jpg"
  },
  {
    "productId": 2,
    "name": "Test 2",
    "image": "sample.jpg"
  },
  {
    "productId": 3,
    "name": "Test 3",
    "image": "sample.jpg"
  },
  {
    "productId": 4,
    "name": "Test 4",
    "image": "sample.jpg"
  }
]

确实需要一些关于如何解决这个问题的指导。

提前非常感谢

Answer 1

您在这里缺少返回:

data.filter(item => {
    return item.productId == id
})

试试这个:

return data.filter(item => {
    return item.productId == id
})