Node.js 如何在URL(现在我得到了“object%20Object]”和特定项中显示索引号?
现在正在创建电子商务模型 开发环境 Mac、Node.js、Vue.js 我想做什么 点击我的订单页面(照片1)中的“详细信息”按钮后,进入订单详细信息页面(照片2) 1) 在订单详细信息页面(照片2)中,URL为“/orders/[object%20Object]”,我想在我的订单页面(照片1)中单击详细信息按钮orderId 0时将其更改为“/orders/0”。如果为1,则url为“/订单/1” 2) 在订单详细信息页面(照片2)中,当您单击订单1时,它应仅显示订单ID 0 3) 在订单详细信息页面(照片2),我想查看保存在项目中的价格、数量和金额 GET/user/orders/{orderId}返回特定的订单,结构与购物车相同 我想要达到的是最后一张照片(照片3) 我的订单页面↓(照片一) 订单详情页↓(照片二) 最后一张图片「订单」 详情页“↓(照片3)这就是我想要实现的目标 OrderDetail.vue↓Node.js 如何在URL(现在我得到了“object%20Object]”和特定项中显示索引号?,node.js,vue.js,web,Node.js,Vue.js,Web,现在正在创建电子商务模型 开发环境 Mac、Node.js、Vue.js 我想做什么 点击我的订单页面(照片1)中的“详细信息”按钮后,进入订单详细信息页面(照片2) 1) 在订单详细信息页面(照片2)中,URL为“/orders/[object%20Object]”,我想在我的订单页面(照片1)中单击详细信息按钮orderId 0时将其更改为“/orders/0”。如果为1,则url为“/订单/1” 2) 在订单详细信息页面(照片2)中,当您单击订单1时,它应仅显示订单ID 0 3) 在订单详
<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>
为了安全起见
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>
我的命令
医嘱ID
产品数量
行动
{{index}}
数量:{{item.qty}
细节
从“axios”导入axios;
导出默认值{
名称:“订单列表”,
计算:{
项目:功能(){
返回此。$root.$data.cart.items | |;[];
},
总计:函数(){
设和=0
用于(此.items的常量项){
总和+=项目总数
}
回报金额
}
},
道具:{
顺序:对象
},
数据:函数(){
返回{
订单:[]
}
},
安装的(){
axios.get(“https://euas.person.ee/user/orders")
。然后(响应=>{
this.orders=response.data;
});
}
}
.选项图像{
最大高度:75px;
最大宽度:150px;
}
在b按钮变体=“深色”:to=“”/orders/“+order.id”>详细信息之后
另外,,
这是现在的照片↓ URL有4个(因为我单击了4),但是还有另一个问题,即显示产品列中的所有项目数据。我怎样才能修好它?我的意思是通过orderId只获取特定的项目,并显示选项图像和总价。
我最新的OrdeDetailVue↓
订单详情
医嘱ID
产品
价格
数量
数量
{{order}}
{{test}}
从“axios”导入axios;
导出默认值{
名称:“订单列表”,
计算:{
项目:功能(){
返回此项。$root.$data.cart.items | |[];
},
总计:函数(){
设和=0
用于(此.items的常量项){
总和+=项目总数
}
回报金额
}
},
道具:{
顺序:对象
},
数据:函数(){
返回{
订单:[]
}
},
安装的(){
axios.get(“https://euas.person.ee/user/orders/“+this.$route.params.orderId)
。然后(响应=>{
this.orders=response.data;
});
axios.get(“https://euas.person.ee/user/orders/")
。然后(响应=>{
this.test=response.data;
});
}
}
.选项图像{
最大高度:75px;
最大宽度:150px;
}
您似乎忘记在链接中指明字段id
<b-button variant="dark" :to=" '/orders/' + order.id">Detail</b-button>
细节
非常感谢,它改变了,但是我得到了“”在控制台日志中显示订单对象,就像控制台。日志(this.order)在这个按钮上再次单击抱歉,不知怎么的,它现在起作用了,可能我删除了现金并使用safari,然后再次使用chrome,它起作用了,但是,还有另一个问题。我添加了一个新的照片和代码。不要试图在模板中显示对象,只需指示特定的字段,如{{order.items.length}}对不起,也许我没有100%地理解它,我把{order.items.length}放在模板中,但显示了白色页面。
<b-button variant="dark" :to=" '/orders/' + order.id">Detail</b-button>