我在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 }
}
]
})
更新
答案 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>