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

时间:2018-04-24 01:45:21

标签: javascript vue.js store bulma

我在Products.vue,ProductHome.vue和ProductDetail.vue中有一个产品数组。在这种情况下,我将数据存储在每个文件中,并且内部产品具有20个产品的每个产品。一切都运行良好,但是当我尝试在路由链接中显示每个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>

ProductDetail.vue:

<template lang="html">
  <div class="product-detail container">
    {{ product.productName }}
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  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'}
      ]
    }
  },
  props: ['products']
}
</script>

在我的路由索引中.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/pages/home/Home'
import Products from '@/components/pages/product/Products'
// import ProductDetail from '@/components/pages/product/ProductDetail'

Vue.use(Router)

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

更新

1 个答案:

答案 0 :(得分:0)

要在详细信息视图中获取正确的产品,请使用computed属性查找products数组中的条目:

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

要让详细信息链接生效,请在name路径中提供/products/:id,例如detail并将其与v-bind中的router-link一起使用:

在代码中:

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>