Javascript 按ID获取Vue JS中的静态JSON单产品数据

我正在创建一个Vue JS应用程序，该应用程序将显示一个产品列表，单击该列表将通过其ID（通过Vue路由器参数传递）链接到动态产品。这一点很好，但我需要做的是，一旦进入动态路线，按ID显示该产品的所有数据。我对Vue还是相当陌生，不知道该采取什么方法。我认为我不需要axios，因为这不是一个在线应用程序，因此无法访问API。我也不知道是否需要使用vuex。目前，我正在尝试使用一种简单的方法，通过routes参数传递的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>

当展开时，它会显示

0:{{uuuuuuuuuuuuuuuuuuuuuuuuuuuoObserver}

，如果你展开了这个观察者，确实有它的数据

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"
  }
]

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

---

非常感谢

您错过了

返回信息

：

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

试试这个：

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

---

如果您不使用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>

{{singleProduct}}
{{singleProduct.productId}
从“@/json/data.json”导入json
导出默认值{
名称：“ProductSingle”，
数据（）{
返回{
产品：json，
单产品：未定义
}
},
计算：{
productId（）{
从路由返回此。$route.params.id//From route
}
},
创建（）{
这个.assignSingleProduct（）；
},
方法：{
产品名称（）{
设data=this.products
data.filter（项=>{
return item.productId==this.productId
})
//分配给数据
this.singleProduct=数据
}
}
}

data.filter（item=>{return item.productId==id}）中的筛选数组似乎从未真正返回过。你只是在过滤阵列，然后什么都不做，太棒了！我没意识到我必须这么做！感谢您，它似乎已经完成了trickCool，感谢您的评论，如果数据中有子数组，我可能需要循环。例如，所有的产品都有一系列的功能——这是否相当容易实现？是的。在这种情况下，您可以添加v-for=“feature In product.features”：）如果这解决了您的问题，请关闭该问题。我看不出如何关闭它-您的答案肯定有帮助，但它没有按预期工作。我仍然能够从答案中得到一些东西，谢谢！

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

<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>