teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

Main.jsを追加

2020/04/02 17:22

投稿

退会済みユーザー
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

試したことの追加

2020/04/02 17:22

投稿

退会済みユーザー
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

開発環境の説明に誤りが会ったため

2020/04/02 09:36

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  いつもお世話になっております。
2
2
 
3
3
  開発環境
4
- Mac, Vue.js, Boostrap
4
+ Mac, Vue.js, BoostrapVue
5
5
 
6
6
  現在、ショッピングサイトのモックアップを、練習で作成しているのですが、"Order Now!"ボタンの後に、ShoppingCart内のプロダクトはすべて消えるはずなのですが、手動でリロードしないとwebページが更新されません。
7
7
 
@@ -11,7 +11,7 @@
11
11
  ![ショッピングカートの中](b390f60860a125e011ee33efa8bd687f.png)
12
12
 
13
13
  ボタンを押した後↓ 緑色の"Order Now!"ボタンが消え、プロダクトもクリーンになっていますが、これは手動(command + R)で更新した場合です。これをボタンを押すと同時に自動で更新するには、どうしたら良いでしょうか?
14
- ![![現在は手動で更新しています](8f900c3355c006ebbba70ba1737adea1.png)]
14
+ ![![現在は手動で更新しています](8f900c3355c006ebbba70ba1737adea1.png)
15
15
 
16
16
  ```Vue
17
17
  <template>