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

你在这里缺少一个return:

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

试试这个:

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