Javascript 如何在产品中详细显示数据？

我在products.vue、ProductHome.vue和ProductDetail.vue中有一个产品数组。在本例中，我将数据存储在每个文件中，而内部产品中的每个产品都有20个产品。一切都运行良好，但当我试图在route link中获得按id显示的数据，然后已经在详细信息页面中，如何在产品中显示按id显示的数据？这是我在ProductHome和products中的产品数据：

<template lang="html">
  <div class="product-home">
    <div class="columns is-multiline is-mobile">
      <div class="column is-3" v-bind:key="product.id" v-for="product in products.slice(0,8)">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img v-bind:src="product.imgSrc" v-bind:alt="product.productName">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-5">{{ product.productName }}</p>
                <p class="subtitle is-6">${{ product.price }}</p>
              </div>
              <div class="media-right">
                <router-link :to="'products/' + product.id" class="button is-small">Detail</router-link>
              </div>
            </div>

            <div class="content">
              <small>Length: {{ product.length }} CM</small>
              <br>
              <small>Width: {{ product.width }} CM</small>
              <br>
              <small>Size: {{ product.size }} CM</small>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'product',
  data () {
    return {
      products: [
        {id: 0, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 1', price: '30,0', length: '99', width: '99', size: '99'},
        {id: 1, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 2', price: '25,0', length: '99', width: '99', size: '99'},
        {id: 2, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 3', price: '35,0', length: '99', width: '99', size: '99'},
        {id: 3, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 4', price: '22,0', length: '99', width: '99', size: '99'},
        {id: 4, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 5', price: '29,0', length: '99', width: '99', size: '99'},
        {id: 5, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 6', price: '24,0', length: '99', width: '99', size: '99'},
        {id: 6, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 7', price: '32,0', length: '99', width: '99', size: '99'},
        {id: 7, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 8', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 8, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 9', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 9, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 10', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 10, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 11', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 11, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 12', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 12, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 13', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 13, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 14', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 14, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 15', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 15, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 16', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 16, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 17', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 17, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 18', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 18, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 19', price: '40,0', length: '99', width: '99', size: '99'},
        {id: 19, imgSrc: 'https://bulma.io/images/placeholders/1280x960.png', productName: 'Clothes 20', price: '40,0', length: '99', width: '99', size: '99'}
      ]
    }
  }
}
</script>

---

更新

要在详细信息视图中获取正确的产品，请使用计算属性在产品数组中查找条目：

export default {
  ...
  computed: {
    product() {
      let product = this.products.find(product => product.id === this.$route.params.id);
      return product;
    }
  },
  ...
}

要使详细信息链接正常工作，请为您的

/products/:id

路由指定

名称

，例如

详细信息

，并将其与

路由器链接

中的

v-bind

一起使用：

在守则中：

export default new Router({
  routes: [
    ...
    {
      path: '/products/:id',
      name: 'detail',
      component: { Products }
    }
  ]
})

在模板中：

<router-link v-bind:to="{ name: 'detail', params: { id: product.id } }" class="button is-small">Detail</router-link>

细节

这几乎是不可理解的-例如，“因为我手动存储了它，所以我想调用数据”是什么意思？你使用谷歌翻译（直接或间接）？对不起，我的英语不太好。我的意思是我放在ProductDetail.vue、Products.vue和ProductHome.vue中的每个文件上的数据，我如何才能在

Products:[{data_array}，{etc}]

中获取数据，而不必将这些数据逐个放在ProductDetail.vue、Products.vue和ProductHome.vue中？以及如何在ProductDetail.vue内按每个id

产品：[{data\u array}，{etc}]

显示数据？像动态帖子如果你使用的是laravel，那么就有show detail post，类似于我的意思是：）呵呵，感谢detail链接正在工作，而在show detail中，产品如何收集每个id的数据，我的意思是？

export default new Router({
  routes: [
    ...
    {
      path: '/products/:id',
      name: 'detail',
      component: { Products }
    }
  ]
})

<router-link v-bind:to="{ name: 'detail', params: { id: product.id } }" class="button is-small">Detail</router-link>