Сейчас создаем макет электронной коммерции,
Среда разработки Ma c, Node.js, Vue. js
Что я хочу сделать
После нажатия кнопки «Подробнее» на странице «Мои заказы» (фото1), она переходит на страницу «Детали заказа» (Фото2)
1) На странице «Детали заказа» (Фото2) URL-адрес «/ orders / [object%» 20Объект] ", я хотел бы изменить его на" / orders / 0 ", когда я нажимаю кнопку детализации orderId 0 на странице" Мои заказы "(Фото1). когда он равен 1, то URL-адрес равен "/ orders / 1"
2) На странице сведений о заказе (Фото2) он должен отображать OrderId 0 только при нажатии на заказ 1
3). На странице деталей заказа (Фото2) я хочу увидеть цену, кол-во, сумму, сохраненную в товарах.
GET / user / orders / {orderId} Возвращает конкретный заказ c, структура такая же, как корзина
То, чего я хочу достичь, похоже на последнюю фотографию (фото3)
Страница моих заказов ↓ (Фото1)
Страница сведений о заказе ↓ （Photo2） 
последнее изображение Page Страница сведений о заказе 」↓ (photo3) это то, чего я хочу достичь.
OrderDetail.vue ↓
<template>
<div class="OrderListing">
<h2>Order Detail</h2>
<table class="table">
<tr>
<th>OrderId</th>
<th>Product</th>
<th>Price</th>
<th>qty</th>
<th>Amount</th>
</tr>
<tr v-for="(order, index) in this.orders" :key="order.id">
<td>{{index}}</td>
<div v-for="item in order.items" :key="item.productId">
<td>
<img :src="item.optionImage" class="option-image" />
</td>
</div>
<td>Here should be 「item.price」</td>
<td>Here should be 「item.qty」</td>
<td>Here should be 「item.total」</td>
</tr>
<tr class="total-row">
<td>TOTAL:</td>
<td></td>
<td></td>
<td>{{ total }}</td>
<td></td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'OrderListing',
computed: {
items: function() {
return this.$root.$data.cart.items || [];
},
total: function() {
let sum = 0
for (const item of this.items) {
sum += item.total
}
return sum
}
},
props: {
order: Object
},
data: function() {
return {
orders: []
}
},
mounted() {
axios.get("https://euas.person.ee/user/orders")
.then(response => {
this.orders = response.data;
});
}
//or can be ""https://euas.person.ee/orders/"+ this.$route.params.orderId"
}
</script>
<style scoped>
.option-image {
max-height: 75px;
max-width: 150px;
}
</style>
ｍain.js ↓
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import VueRouter from 'vue-router'
import MainPage from './components/MainPage.vue'
import ProductPage from './components/ProductPage.vue'
import Category from './components/Category.vue'
import axios from "axios";
import ShoppingCartPage from './components/ShoppingCartPage.vue'
import OrderListing from './components/OrderListing.vue'
import OrderDetail from './components/OrderDetail.vue'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/',
component: MainPage
},
{
path: '/categories/:categoryAlias',
component: Category
},
{
path: '/products/:productId',
component: ProductPage
},
{
path: '/cart',
component: ShoppingCartPage
},
{
path: '/order',
component: OrderListing
},
{
path: '/orders/:orderId',
component: OrderDetail
}
],
mode: 'history'
});
axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com';
if (localStorage.cartId) {
axios.get("https://euas.person.ee/user/carts/" + localStorage.cartId).then(response => {
new Vue({
render: h => h(App),
router: router,
data: {
cart: response.data,
saveCart() {
axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
},
reinitCart() {
axios.post("https://euas.person.ee/user/carts/").then(response => {
localStorage.cartId = response.data.id
this.cart = response.data;
});
}
}
}).$mount('#app')
});
} else {
axios.post("https://euas.person.ee/user/carts/").then(response => {
new Vue({
render: h => h(App),
router: router,
data: {
cart: response.data,
saveCart() {
axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
},
reinitCart() {
axios.post("https://euas.person.ee/user/carts/").then(response => {
localStorage.cartId = response.data.id
this.cart = response.data;
});
axios.post("https://euas.person.ee/user/carts/" + this.cart.id + "/orders/").then(response => {
localStorage.cartId = response.data.id
this.cart = response.data;
});
},
getOrders(){
axios.get("https://euas.person.ee/user/orders/").then(response => {
localStorage.orderId = response.data.id
this.cart = response.data;
})
}
}
}).$mount('#app')
});
}
На всякий случай,
OrderListing.vue ↓
<div class="OrderListing">
<h2>My Orders</h2>
<table class="table">
<tr>
<th>OrderId</th>
<th>Products Quantity</th>
<th>Action</th>
</tr>
<tr v-for="(order, index) in this.orders" :key="order.id">
<td>{{index}}</td>
<div v-for="item in order.items" :key="item.productId">
<td>
<img :src="item.optionImage" class="option-image" />
</td>
<td>Quantity : {{ item.qty }}</td>
</div>
<td>
<b-button variant="dark" :to=" '/orders/' + order">Detail</b-button>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'OrderListing',
computed: {
items: function() {
return this.$root.$data.cart.items || [];
},
total: function() {
let sum = 0
for (const item of this.items) {
sum += item.total
}
return sum
}
},
props: {
order: Object
},
data: function() {
return {
orders: []
}
},
mounted() {
axios.get("https://euas.person.ee/user/orders")
.then(response => {
this.orders = response.data;
});
}
}
</script>
<style scoped>
.option-image {
max-height: 75px;
max-width: 150px;
}
</style>
После варианта b-button = "dark": to = "'/ orders /' + order.id"> Сведения
Кроме того, это фото прямо сейчас ↓ URL имеет 4 (потому что я нажал 4), Однако есть и другая проблема, которая показывает все данные о товарах в столбце продукта. Как я могу это исправить? Я имею в виду получать только указанные c элементы по orderId, показывать изображение опции и общую стоимость. 
Новейший мой OrdeDetailVue ↓
<template>
<div class="OrderListing">
<h2>Order Detail</h2>
<table class="table">
<tr>
<th>OrderId</th>
<th>Product</th>
<th>Price</th>
<th>qty</th>
<th>Amount</th>
</tr>
<tr v-for="order in this.orders" :key="order.id">
<td>{{order}}</td>
<td>{{test}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'OrderListing',
computed: {
items: function() {
return this.$root.$data.cart.items || [];
},
total: function() {
let sum = 0
for (const item of this.items) {
sum += item.total
}
return sum
}
},
props: {
order: Object
},
data: function() {
return {
orders: []
}
},
mounted() {
axios.get("https://euas.person.ee/user/orders/" + this.$route.params.orderId)
.then(response => {
this.orders = response.data;
});
axios.get("https://euas.person.ee/user/orders/")
.then(response => {
this.test = response.data;
});
}
}
</script>
<style scoped>
.option-image {
max-height: 75px;
max-width: 150px;
}
</style>