質問編集履歴
3
Main.jsを追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -106,4 +106,94 @@
|
|
106
106
|
}
|
107
107
|
</style>
|
108
108
|
|
109
|
+
```
|
110
|
+
|
111
|
+
```Main
|
112
|
+
import Vue from 'vue'
|
113
|
+
import App from './App.vue'
|
114
|
+
import BootstrapVue from 'bootstrap-vue'
|
115
|
+
import 'bootstrap/dist/css/bootstrap.css'
|
116
|
+
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
117
|
+
import VueRouter from 'vue-router'
|
118
|
+
import MainPage from './components/MainPage.vue'
|
119
|
+
import ProductPage from './components/ProductPage.vue'
|
120
|
+
import Category from './components/Category.vue'
|
121
|
+
|
122
|
+
import axios from "axios";
|
123
|
+
import ShoppingCartPage from './components/ShoppingCartPage.vue'
|
124
|
+
import OrderListing from './components/OrderListing.vue'
|
125
|
+
|
126
|
+
|
127
|
+
Vue.config.productionTip = false
|
128
|
+
Vue.use(BootstrapVue)
|
129
|
+
Vue.use(VueRouter)
|
130
|
+
|
131
|
+
const router = new VueRouter({
|
132
|
+
routes: [{
|
133
|
+
path: '/',
|
134
|
+
component: MainPage
|
135
|
+
},
|
136
|
+
|
137
|
+
{
|
138
|
+
path: '/categories/:categoryAlias',
|
139
|
+
component: Category
|
140
|
+
},
|
141
|
+
{
|
142
|
+
path: '/products/:productId',
|
143
|
+
component: ProductPage
|
144
|
+
},
|
145
|
+
{
|
146
|
+
path: '/cart',
|
147
|
+
component: ShoppingCartPage
|
148
|
+
},
|
149
|
+
{
|
150
|
+
path: '/order',
|
151
|
+
component: OrderListing
|
152
|
+
}
|
153
|
+
],
|
154
|
+
mode: 'history'
|
155
|
+
});
|
156
|
+
|
157
|
+
axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com';
|
158
|
+
|
159
|
+
if (localStorage.cartId) {
|
160
|
+
axios.get("https://euas.person.ee/user/carts" + localStorage.cartId).then(response => {
|
161
|
+
new Vue({
|
162
|
+
render: h => h(App),
|
163
|
+
router: router,
|
164
|
+
data: {
|
165
|
+
cart: response.data,
|
166
|
+
saveCart() {
|
167
|
+
axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
|
168
|
+
},
|
169
|
+
reinitCart() {
|
170
|
+
axios.post("https://euas.person.ee/user/carts").then(response => {
|
171
|
+
localStorage.cartId = response.data.id
|
172
|
+
this.cart = response.data;
|
173
|
+
})
|
174
|
+
}
|
175
|
+
}
|
176
|
+
}).$mount('#app')
|
177
|
+
});
|
178
|
+
} else {
|
179
|
+
axios.post("https://euas.person.ee/user/carts").then(response => {
|
180
|
+
new Vue({
|
181
|
+
render: h => h(App),
|
182
|
+
router: router,
|
183
|
+
data: {
|
184
|
+
cart: response.data,
|
185
|
+
saveCart() {
|
186
|
+
axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
|
187
|
+
},
|
188
|
+
reinitCart() {
|
189
|
+
axios.post("https://euas.person.ee/user/carts").then(response => {
|
190
|
+
localStorage.cartId = response.data.id
|
191
|
+
this.cart = response.data;
|
192
|
+
})
|
193
|
+
}
|
194
|
+
}
|
195
|
+
}).$mount('#app')
|
196
|
+
});
|
197
|
+
}
|
198
|
+
|
109
199
|
```
|
2
試したことの追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,6 +5,10 @@
|
|
5
5
|
|
6
6
|
現在、ショッピングサイトのモックアップを、練習で作成しているのですが、"Order Now!"ボタンの後に、ShoppingCart内のプロダクトはすべて消えるはずなのですが、手動でリロードしないとwebページが更新されません。
|
7
7
|
|
8
|
+
試したこと
|
9
|
+
・Safariで表示しているので、ChromeとFirefoxでlocalhostを開きましたが、同じ結果でした
|
10
|
+
・@clickをもう一つ追加して、更新するメソッドを付け足すとエラーになりました
|
11
|
+
|
8
12
|
ご存知の方がいれば、教えていただけると幸いです。
|
9
13
|
|
10
14
|
ボタンを押す前↓
|
1
開発環境の説明に誤りが会ったため
title
CHANGED
File without changes
|
body
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
いつもお世話になっております。
|
2
2
|
|
3
3
|
開発環境
|
4
|
-
Mac, Vue.js,
|
4
|
+
Mac, Vue.js, BoostrapVue
|
5
5
|
|
6
6
|
現在、ショッピングサイトのモックアップを、練習で作成しているのですが、"Order Now!"ボタンの後に、ShoppingCart内のプロダクトはすべて消えるはずなのですが、手動でリロードしないとwebページが更新されません。
|
7
7
|
|
@@ -11,7 +11,7 @@
|
|
11
11
|

|
12
12
|
|
13
13
|
ボタンを押した後↓ 緑色の"Order Now!"ボタンが消え、プロダクトもクリーンになっていますが、これは手動(command + R)で更新した場合です。これをボタンを押すと同時に自動で更新するには、どうしたら良いでしょうか?
|
14
|
-

|
14
|
+

|
15
15
|
|
16
16
|
```Vue
|
17
17
|
<template>
|