[object%20Object] が表示される

いつもお世話になっております

現在、ECサイトのモックアップを作成しております

問題
・Detailボタンをクリックすると、urlに"/orders/ここにOrderID/"と表示されるところが、"http://localhost:8080/orders/[object%20Object]"となってしまい、何も表示されません

目標
・URLにOrderIDが０の列のDetailボタンをクリックすると、OrderDetailページに飛び、そのときのURLが"orderｓ/0"となること
・列0をクリックしたなら、０の中身だけOrderDetailページに表示される

試したこと
・キャッシュの削除
・再度npm run serve

Vue.jsは最近触り始めたばかりで、POSTやGET、axiosの使い方もまだ良くわかっていません。詳しい方がいれば、ご教授お願いします。

写真１My Orders のページ↓　ここでDetailボタンをクリックすると、写真２に飛びます

写真２OrderDetail のページ↓

OrderDetailVue
1<template>
2<div class="OrderListing">
3  <h2>Order Detail</h2>
4  <table class="table">
5    <tr>
6      <th>OrderId</th>
7      <th>Product</th>
8      <th>Price</th>
9      <th>qty</th>
10      <th>Amount</th>
11    </tr>
12
13    <tr v-for="order in this.orders" :key="order.id">
14      <td>order</td>
15    </tr>
16
17
18  </table>
19
20
21
22</div>
23</template>
24
25<script>
26import axios from "axios";
27export default {
28  name: 'OrderListing',
29  computed: {
30    items: function() {
31      return this.$root.$data.cart.items || [];
32    },
33    total: function() {
34      let sum = 0
35      for (const item of this.items) {
36        sum += item.total
37      }
38      return sum
39    }
40  },
41  props: {
42    order: Object
43  },
44  data: function() {
45    return {
46      orders: []
47    }
48  },
49  mounted() {
50    axios.get("https://euas.person.ee/orders/"+ this.$route.params.orderId)
51      .then(response => {
52        this.orders = response.data;
53      });
54  }
55}
56</script>
57
58
59<style scoped>
60.option-image {
61  max-height: 75px;
62  max-width: 150px;
63}
64</style>
65

mainJs
1import Vue from 'vue'
2import App from './App.vue'
3import BootstrapVue from 'bootstrap-vue'
4import 'bootstrap/dist/css/bootstrap.css'
5import 'bootstrap-vue/dist/bootstrap-vue.css'
6import VueRouter from 'vue-router'
7import MainPage from './components/MainPage.vue'
8import ProductPage from './components/ProductPage.vue'
9import Category from './components/Category.vue'
10
11import axios from "axios";
12import ShoppingCartPage from './components/ShoppingCartPage.vue'
13import OrderListing from './components/OrderListing.vue'
14import OrderDetail from './components/OrderDetail.vue'
15
16
17Vue.config.productionTip = false
18Vue.use(BootstrapVue)
19Vue.use(VueRouter)
20
21const router = new VueRouter({
22  routes: [{
23      path: '/',
24      component: MainPage
25    },
26
27    {
28      path: '/categories/:categoryAlias',
29      component: Category
30    },
31    {
32      path: '/products/:productId',
33      component: ProductPage
34    },
35    {
36      path: '/cart',
37      component: ShoppingCartPage
38    },
39    {
40      path: '/order',
41      component: OrderListing
42    },
43    {
44      path: '/orders/:orderId',
45      component: OrderDetail
46    }
47  ],
48  mode: 'history'
49});
50
51axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com';
52
53if (localStorage.cartId) {
54  axios.get("https://euas.person.ee/user/carts/" + localStorage.cartId).then(response => {
55    new Vue({
56      render: h => h(App),
57      router: router,
58      data: {
59        cart: response.data,
60        saveCart() {
61          axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
62        },
63        reinitCart() {
64          axios.post("https://euas.person.ee/user/carts/").then(response => {
65            localStorage.cartId = response.data.id
66            this.cart = response.data;
67          });
68        }
69      }
70    }).$mount('#app')
71  });
72} else {
73  axios.post("https://euas.person.ee/user/carts/").then(response => {
74    new Vue({
75      render: h => h(App),
76      router: router,
77      data: {
78        cart: response.data,
79        saveCart() {
80          axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
81        },
82        reinitCart() {
83          axios.post("https://euas.person.ee/user/carts/").then(response => {
84            localStorage.cartId = response.data.id
85            this.cart = response.data;
86          });
87          axios.post("https://euas.person.ee/user/carts/" + this.cart.id + "/orders/").then(response => {
88            localStorage.cartId = response.data.id
89            this.cart = response.data;
90          });
91        },
92        getOrders(){
93          axios.get("https://euas.person.ee/user/orders/").then(response => {
94            localStorage.orderId = response.data.id
95            this.cart = response.data;
96          })
97        }
98      }
99    }).$mount('#app')
100  });
101}
102

OrderListingVue
1<template>
2<div class="OrderListing">
3  <h2>My Orders</h2>
4  <table class="table">
5    <tr>
6      <th>OrderId</th>
7      <th>Products Quantity</th>
8      <th>Action</th>
9    </tr>
10
11    <tr v-for="(order, index) in this.orders" :key="order.id">
12      <td>{{index}}</td>
13        <div v-for="item in order.items" :key="item.productId">
14        <td>
15          <img :src="item.optionImage" class="option-image" />
16        </td>
17        <td>Quantity : {{ item.qty }}</td>
18        </div>
19      <td>
20        <b-button variant="dark" :to=" '/orders/' + order">Detail</b-button>
21      </td>
22    </tr>
23
24  </table>
25
26
27
28</div>
29</template>
30
31<script>
32import axios from "axios";
33export default {
34  name: 'OrderListing',
35  computed: {
36    items: function() {
37      return this.$root.$data.cart.items || [];
38    },
39    total: function() {
40      let sum = 0
41      for (const item of this.items) {
42        sum += item.total
43      }
44      return sum
45    }
46  },
47  props: {
48    order: Object
49  },
50  data: function() {
51    return {
52      orders: []
53    }
54  },
55  mounted() {
56    axios.get("https://euas.person.ee/user/orders")
57      .then(response => {
58        this.orders = response.data;
59      });
60  }
61}
62</script>
63
64
65<style scoped>
66.option-image {
67  max-height: 75px;
68  max-width: 150px;
69}
70</style>
71

行動規範の内容に同意します

回答1件

自己解決

<b-button variant="dark" :to=" '/orders/' + index">Detail</b-button>

とすると、indexの部分がURLになり、ボタンを押した後に表示されます。

OrderListingVue
1<template>
2<div class="OrderListing">
3  <h2>My Orders</h2>
4  <table class="table">
5    <tr>
6      <th>OrderId</th>
7      <th>Products Quantity</th>
8      <th>Action</th>
9    </tr>
10
11    <tr v-for="(order, index) in this.orders" :key="order.id">
12      <td>{{index}}</td>
13        <div v-for="item in order.items" :key="item.productId">
14        <td>
15          <img :src="item.optionImage" class="option-image" />
16        </td>
17        <td>Price : {{ item.price }}</td>
18        <td>Quantity : {{ item.qty }}</td>
19        </div>
20      <td>
21        <b-button variant="dark" :to=" '/orders/' + index">Detail</b-button>
22      </td>
23    </tr>
24
25  </table>
26
27
28
29</div>
30</template>
31
32<script>
33import axios from "axios";
34export default {
35  name: 'OrderListing',
36  computed: {
37    items: function() {
38      return this.$root.$data.cart.items || [];
39    },
40    total: function() {
41      let sum = 0
42      for (const item of this.items) {
43        sum += item.total
44      }
45      return sum
46    }
47  },
48  props: {
49    order: Object
50  },
51  data: function() {
52    return {
53      orders: []
54    }
55  },
56  mounted() {
57    axios.get("https://euas.person.ee/user/orders/")
58      .then(response => {
59        this.orders = response.data;
60      });
61  }
62}
63</script>
64
65
66<style scoped>
67.option-image {
68  max-height: 75px;
69  max-width: 150px;
70}
71</style>
72