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

Question

我正在创建一个 Vue JS 应用程序，该应用程序将显示一个产品列表，单击该列表将通过其 ID 链接到动态产品（通过 Vue 路由器参数传递）。这一点工作正常，但我需要做的是一旦在该动态路线上，按其 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 方法将返回产品的数据，其 ID 由 $route.params.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
})

Answer 2

如果您不使用 Api 或 Vuex，那么您需要将所有数据放在一个可以从多个组件中获取它们的地方。

data.json 很适合。

在您的子组件上，执行以下操作。无需数据迭代。

<template>
  <div>
    {{ singleProduct }}
    {{ singleProduct.productId }}
  </div>
</template>

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

export default {
    name: 'ProductSingle',
  data() {
    return {
      products: json,
      singleProduct: undefined
    }
  },
  computed: {
    productId () {
      return this.$route.params.id // From route
    }
  },
  created () {
    this.assignSingleProduct();
  },
  methods: {
    assignSingleProduct() {
      let data = this.products
      data.filter(item => {
        return item.productId == this.productId
      })

      // Assign to the data
      this.singleProduct = data
    }
  }
}
</script>