質問編集履歴

4

コード説明の追記POSTとGET

2020/04/06 01:33

投稿

Swedon
Swedon

スコア67

test CHANGED
File without changes
test CHANGED
@@ -176,8 +176,18 @@
176
176
 
177
177
 
178
178
 
179
+
180
+
179
181
  ```
180
182
 
183
+
184
+
185
+ 追記=============================================↓
186
+
187
+
188
+
189
+
190
+
181
191
  完成イメージ↓
182
192
 
183
193
  これはShoppingCartのページなので、本来の完成とは違いますが、My Orderページでもこのデザインと動揺に、Idが93の場合は、その中身(optionImage, Price, qty, Amount, total(amountの合計))が表示されるのが目標です.
@@ -188,6 +198,10 @@
188
198
 
189
199
 
190
200
 
201
+ ShoppingCartのOrderNowのイベントハンドリングで、”/orders/”に保存され、その中で、特定のidをもつOrderを取り出すのが、最終目標です
202
+
203
+
204
+
191
205
  ```ShoppingCartVue
192
206
 
193
207
  <template>

3

追加のコード

2020/04/06 01:33

投稿

Swedon
Swedon

スコア67

test CHANGED
File without changes
test CHANGED
@@ -185,3 +185,381 @@
185
185
 
186
186
 
187
187
  ![イメージ説明](46974af61aa3e56f04ad8b81fa4857f2.png)
188
+
189
+
190
+
191
+ ```ShoppingCartVue
192
+
193
+ <template>
194
+
195
+ <div class="shopping-cart-page">
196
+
197
+ <h2>ShoppingCart</h2>
198
+
199
+ <table class="table">
200
+
201
+ <tr>
202
+
203
+ <th>Product</th>
204
+
205
+ <th>Price</th>
206
+
207
+ <th>qty</th>
208
+
209
+ <th>Amount</th>
210
+
211
+ <th>Actions</th>
212
+
213
+ </tr>
214
+
215
+
216
+
217
+ <tr v-for="(item, index) in this.items" :key="item.productId + '_' + index">
218
+
219
+ <td>
220
+
221
+ <img :src="item.optionImage" class="option-image" />
222
+
223
+ </td>
224
+
225
+ <td>{{ item.price }}</td>
226
+
227
+ <td>{{ item.qty }}</td>
228
+
229
+ <td>{{ item.total }}</td>
230
+
231
+ <td>
232
+
233
+ <b-button variant="danger" @click="removeItem(index)">Remove</b-button>
234
+
235
+ </td>
236
+
237
+ </tr>
238
+
239
+ <tr class="total-row">
240
+
241
+ <td>TOTAL:</td>
242
+
243
+ <td></td>
244
+
245
+ <td></td>
246
+
247
+ <td>{{ total }}</td>
248
+
249
+ <td></td>
250
+
251
+ </tr>
252
+
253
+ </table>
254
+
255
+
256
+
257
+ <b-button variant="success" size="lg" @click="orderNow" v-if="this.items.length">Order Now!</b-button>
258
+
259
+
260
+
261
+ </div>
262
+
263
+ </template>
264
+
265
+
266
+
267
+ <script>
268
+
269
+ import axios from "axios";
270
+
271
+ export default {
272
+
273
+ name: 'ShoppingCartPage',
274
+
275
+ computed: {
276
+
277
+ items: function() {
278
+
279
+ return this.$root.$data.cart.items || [];
280
+
281
+ },
282
+
283
+ total: function() {
284
+
285
+ let sum = 0
286
+
287
+ for (const item of this.items) {
288
+
289
+ sum += item.total
290
+
291
+ }
292
+
293
+ return sum
294
+
295
+ }
296
+
297
+ },
298
+
299
+ methods: {
300
+
301
+ removeItem: function(index) {
302
+
303
+ if (!this.$root.$data.cart.items) this.$root.$data.cart.items = []
304
+
305
+ this.$root.$data.cart.items.splice(index, 1);
306
+
307
+ console.log(this.$root.$data.cart.items);
308
+
309
+ this.$root.$data.saveCart();
310
+
311
+ },
312
+
313
+
314
+
315
+ orderNow: function() {
316
+
317
+ let data = this.$root.$data
318
+
319
+
320
+
321
+ axios.post("https://euas.person.ee/user/carts/" + this.$root.$data.cart.id + "/orders/",
322
+
323
+ this.$root.$data.cart).then(function() {
324
+
325
+ data.reinitCart();
326
+
327
+ })
328
+
329
+ }
330
+
331
+ }
332
+
333
+ }
334
+
335
+ </script>
336
+
337
+
338
+
339
+
340
+
341
+ <style scoped>
342
+
343
+ .option-image {
344
+
345
+ max-height: 50px;
346
+
347
+ max-width: 100px;
348
+
349
+ }
350
+
351
+ </style>
352
+
353
+
354
+
355
+ ```
356
+
357
+
358
+
359
+ ```mainJS
360
+
361
+ import Vue from 'vue'
362
+
363
+ import App from './App.vue'
364
+
365
+ import BootstrapVue from 'bootstrap-vue'
366
+
367
+ import 'bootstrap/dist/css/bootstrap.css'
368
+
369
+ import 'bootstrap-vue/dist/bootstrap-vue.css'
370
+
371
+ import VueRouter from 'vue-router'
372
+
373
+ import MainPage from './components/MainPage.vue'
374
+
375
+ import ProductPage from './components/ProductPage.vue'
376
+
377
+ import Category from './components/Category.vue'
378
+
379
+
380
+
381
+ import axios from "axios";
382
+
383
+ import ShoppingCartPage from './components/ShoppingCartPage.vue'
384
+
385
+ import OrderListing from './components/OrderListing.vue'
386
+
387
+ import OrderDetail from './components/OrderDetail.vue'
388
+
389
+
390
+
391
+
392
+
393
+ Vue.config.productionTip = false
394
+
395
+ Vue.use(BootstrapVue)
396
+
397
+ Vue.use(VueRouter)
398
+
399
+
400
+
401
+ const router = new VueRouter({
402
+
403
+ routes: [{
404
+
405
+ path: '/',
406
+
407
+ component: MainPage
408
+
409
+ },
410
+
411
+
412
+
413
+ {
414
+
415
+ path: '/categories/:categoryAlias',
416
+
417
+ component: Category
418
+
419
+ },
420
+
421
+ {
422
+
423
+ path: '/products/:productId',
424
+
425
+ component: ProductPage
426
+
427
+ },
428
+
429
+ {
430
+
431
+ path: '/cart',
432
+
433
+ component: ShoppingCartPage
434
+
435
+ },
436
+
437
+ {
438
+
439
+ path: '/order',
440
+
441
+ component: OrderListing
442
+
443
+ },
444
+
445
+ {
446
+
447
+ path: '/orders/:orderId',
448
+
449
+ component: OrderDetail
450
+
451
+ }
452
+
453
+ ],
454
+
455
+ mode: 'history'
456
+
457
+ });
458
+
459
+
460
+
461
+ axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com';
462
+
463
+
464
+
465
+ if (localStorage.cartId) {
466
+
467
+ axios.get("https://euas.person.ee/user/carts/" + localStorage.cartId).then(response => {
468
+
469
+ new Vue({
470
+
471
+ render: h => h(App),
472
+
473
+ router: router,
474
+
475
+ data: {
476
+
477
+ cart: response.data,
478
+
479
+ saveCart() {
480
+
481
+ axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
482
+
483
+ },
484
+
485
+ reinitCart() {
486
+
487
+ axios.post("https://euas.person.ee/user/carts/").then(response => {
488
+
489
+ localStorage.cartId = response.data.id
490
+
491
+ this.cart = response.data;
492
+
493
+ });
494
+
495
+ }
496
+
497
+ }
498
+
499
+ }).$mount('#app')
500
+
501
+ });
502
+
503
+ } else {
504
+
505
+ axios.post("https://euas.person.ee/user/carts/").then(response => {
506
+
507
+ new Vue({
508
+
509
+ render: h => h(App),
510
+
511
+ router: router,
512
+
513
+ data: {
514
+
515
+ cart: response.data,
516
+
517
+ saveCart() {
518
+
519
+ axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
520
+
521
+ },
522
+
523
+ reinitCart() {
524
+
525
+ axios.post("https://euas.person.ee/user/carts/").then(response => {
526
+
527
+ localStorage.cartId = response.data.id
528
+
529
+ this.cart = response.data;
530
+
531
+ });
532
+
533
+ axios.post("https://euas.person.ee/user/carts/" + this.cart.id + "/orders/").then(response => {
534
+
535
+ localStorage.cartId = response.data.id
536
+
537
+ this.cart = response.data;
538
+
539
+ });
540
+
541
+ },
542
+
543
+ getOrders(){
544
+
545
+ axios.get("https://euas.person.ee/user/orders/").then(response => {
546
+
547
+ localStorage.orderId = response.data.id
548
+
549
+ this.cart = response.data;
550
+
551
+ })
552
+
553
+ }
554
+
555
+ }
556
+
557
+ }).$mount('#app')
558
+
559
+ });
560
+
561
+ }
562
+
563
+
564
+
565
+ ```

2

完成イメージの追加

2020/04/06 01:29

投稿

Swedon
Swedon

スコア67

test CHANGED
File without changes
test CHANGED
@@ -177,3 +177,11 @@
177
177
 
178
178
 
179
179
  ```
180
+
181
+ 完成イメージ↓
182
+
183
+ これはShoppingCartのページなので、本来の完成とは違いますが、My Orderページでもこのデザインと動揺に、Idが93の場合は、その中身(optionImage, Price, qty, Amount, total(amountの合計))が表示されるのが目標です.
184
+
185
+
186
+
187
+ ![イメージ説明](46974af61aa3e56f04ad8b81fa4857f2.png)

1

試したことを追加

2020/04/06 01:27

投稿

Swedon
Swedon

スコア67

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,14 @@
13
13
  Test9の中にitemsのデータが入っているのですが、すべてのデータが表示されてしまいます。↓
14
14
 
15
15
  このProductの中から、例えばOrderIdが93なら、itemsの中で、93番めのitemsのデータだけを取得し、ProductカラムにoptionImage, Priceカラムにitem.price、と表示出来ないでしょうか?
16
+
17
+
18
+
19
+ 試したこと:
20
+
21
+ <td>{{ order.items.length }} </td>で表示する→検証でエラー、何も表示されない
22
+
23
+ <td>{{ order.items.price }} </td>上に同じく
16
24
 
17
25
 
18
26