いつもお世話になっております。
開発環境
Mac, Vue.js, BoostrapVue
現在、ショッピングサイトのモックアップを、練習で作成しているのですが、"Order Now!"ボタンの後に、ShoppingCart内のプロダクトはすべて消えるはずなのですが、手動でリロードしないとwebページが更新されません。
試したこと
・Safariで表示しているので、ChromeとFirefoxでlocalhostを開きましたが、同じ結果でした
・@clickをもう一つ追加して、更新するメソッドを付け足すとエラーになりました
ご存知の方がいれば、教えていただけると幸いです。
ボタンを押した後↓ 緑色の"Order Now!"ボタンが消え、プロダクトもクリーンになっていますが、これは手動(command + R)で更新した場合です。これをボタンを押すと同時に自動で更新するには、どうしたら良いでしょうか?
![
Vue
1<template> 2<div class="shopping-cart-page"> 3 <h2>ShoppingCart</h2> 4 <table class="table"> 5 <tr> 6 <th>Product</th> 7 <th>Price</th> 8 <th>qty</th> 9 <th>Amount</th> 10 <th>Actions</th> 11 </tr> 12 13 <tr v-for="(item, index) in this.$root.$data.cart.items" :key="item.productId + '_' + index"> 14 <td> 15 <img :src="item.optionImage" class="option-image" /> 16 </td> 17 <td>{{ item.price }}</td> 18 <td>{{ item.qty }}</td> 19 <td>{{ item.total }}</td> 20 <td> 21 <b-button variant="danger" @click="removeItem(index)">Remove</b-button> 22 </td> 23 </tr> 24 <tr class="total-row"> 25 <td>TOTAL:</td> 26 <td></td> 27 <td></td> 28 <td>{{ total }}</td> 29 <td></td> 30 </tr> 31 </table> 32 33 <b-button variant="success" size="lg" @click="orderNow" v-if="this.items.length">Order Now!</b-button> 34 35</div> 36</template> 37 38<script> 39import axios from "axios"; 40export default { 41 name: 'ShoppingCartPage', 42 computed: { 43 items: function() { 44 return this.$root.$data.cart.items || []; 45 }, 46 total: function() { 47 let sum = 0 48 for (const item of this.items) { 49 sum += item.total 50 } 51 return sum 52 } 53 }, 54 methods: { 55 removeItem: function(index) { 56 if (!this.$root.$data.cart.items) this.$root.$data.cart.items = [] 57 this.$root.$data.cart.items.splice(index, 1); 58 console.log(this.$root.$data.cart.items); 59 this.$root.$data.saveCart(); 60 }, 61 62 orderNow: function() { 63 let data = this.$root.$data 64 65 axios.post("user/carts/" + this.$root.$data.cart.id + "/orders", 66 this.$root.$data.cart).then(function() { 67 data.reinitCart(); 68 }) 69 }, 70 71 reset: function() { 72 this.$router.go({ 73 path: this.$router.currentRoute.path, 74 force: true 75 }) 76 } 77 } 78} 79</script> 80 81 82<style scoped> 83.option-image { 84 max-height: 50px; 85 max-width: 100px; 86} 87</style> 88
Main
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' 14 15 16Vue.config.productionTip = false 17Vue.use(BootstrapVue) 18Vue.use(VueRouter) 19 20const router = new VueRouter({ 21 routes: [{ 22 path: '/', 23 component: MainPage 24 }, 25 26 { 27 path: '/categories/:categoryAlias', 28 component: Category 29 }, 30 { 31 path: '/products/:productId', 32 component: ProductPage 33 }, 34 { 35 path: '/cart', 36 component: ShoppingCartPage 37 }, 38 { 39 path: '/order', 40 component: OrderListing 41 } 42 ], 43 mode: 'history' 44}); 45 46axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com'; 47 48if (localStorage.cartId) { 49 axios.get("https://euas.person.ee/user/carts" + localStorage.cartId).then(response => { 50 new Vue({ 51 render: h => h(App), 52 router: router, 53 data: { 54 cart: response.data, 55 saveCart() { 56 axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart) 57 }, 58 reinitCart() { 59 axios.post("https://euas.person.ee/user/carts").then(response => { 60 localStorage.cartId = response.data.id 61 this.cart = response.data; 62 }) 63 } 64 } 65 }).$mount('#app') 66 }); 67} else { 68 axios.post("https://euas.person.ee/user/carts").then(response => { 69 new Vue({ 70 render: h => h(App), 71 router: router, 72 data: { 73 cart: response.data, 74 saveCart() { 75 axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart) 76 }, 77 reinitCart() { 78 axios.post("https://euas.person.ee/user/carts").then(response => { 79 localStorage.cartId = response.data.id 80 this.cart = response.data; 81 }) 82 } 83 } 84 }).$mount('#app') 85 }); 86} 87
回答1件
あなたの回答
tips
プレビュー