質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

解決済

1回答

1319閲覧

ボタンクリック時に、自動でページを更新させる

Eston

総合スコア67

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

0クリップ

投稿2020/04/02 09:28

編集2020/04/02 17:22

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

開発環境
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ShintaroNomiya

2020/04/02 13:06

v-forの参照先をcomputedのプロパティにしても変わりませんか? 具体的に言うと`v-for="(item, index) in this.$root.$data.cart.items"`の部分を`v-for="(item, index) in this.items"`にしてうまくいくか確かめてみてほしいです
Eston

2020/04/02 17:00

ご指摘ありがとうございます。 試してみましたが、変化がありません。 ページのソースを覗くと、”Order Now!”をクリックしたときにエラーが発生していました。 エラー↓ [Error] Failed to load resource: サーバに接続できませんでした。 (info, line 0)
guest

回答1

0

自己解決

65行目のaxios.post("user/carts/" + this.$root.$data.cart.id + "/orders",

Vue

1axios.post("https://euas.person.ee/user/carts/" + this.$root.$data.cart.id + "/orders", 2 this.$root.$data.cart).then(function() { 3 data.reinitCart(); 4 })

に変更するとうまくいきました

有難うございました

投稿2020/04/02 17:31

Eston

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問