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

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

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

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

Vue CLI

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Webサイト

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

Q&A

解決済

2回答

1945閲覧

Vue.jsで特定のデータを切り取って表示したい

Eston

総合スコア67

Vue.js

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

Vue CLI

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Webサイト

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

0グッド

0クリップ

投稿2020/04/05 23:28

編集2020/04/06 01:33

いつもお世話になっております。この質問を読んできださりありがとうございます。

現在ECサイトのモックアップを作成しているのですが、その過程で表示するデータを切り取って、特定のデータだけを表示したいと考えております。

環境開発: Mac, Atom, Vue.js

Test9の中にitemsのデータが入っているのですが、すべてのデータが表示されてしまいます。↓
このProductの中から、例えばOrderIdが93なら、itemsの中で、93番めのitemsのデータだけを取得し、ProductカラムにoptionImage, Priceカラムにitem.price、と表示出来ないでしょうか?

試したこと:

<td>{{ order.items.length }} </td>で表示する→検証でエラー、何も表示されない <td>{{ order.items.price }} </td>上に同じく

Vue.jsを使うのは今回が初めてで、基本的なことすら理解できていないかも知れませんが、ご教授いただけると幸いです。

イメージ説明

OrderDetailVue

1<template> 2<div class="OrderListing"> 3 <h2>Order Detail</h2> 4 <table class="table"> 5 <tr> 6 <th>OrderId</th> 7 <th>Product</th> 8 <th>Price</th> 9 <th>qty</th> 10 <th>Amount</th> 11 </tr> 12 13 <tr v-for="order in this.orders" :key="order.id"> 14 <td>{{order}}</td> 15 <td>{{test9}}</td> 16 </tr> 17 18 19 </table> 20 21 22 23</div> 24</template> 25 26<script> 27import axios from "axios"; 28export default { 29 name: 'OrderListing', 30 computed: { 31 items: function() { 32 return this.$root.$data.cart.items; 33 }, 34 total: function() { 35 let sum = 0 36 for (const item of this.items) { 37 sum += item.total 38 } 39 return sum 40 } 41 }, 42 props: { 43 order: Object 44 }, 45 data: function() { 46 return { 47 orders: [] 48 } 49 }, 50 mounted() { 51 axios.get("https://euas.person.ee/user/orders/" + this.$route.params.orderId) 52 .then(response => { 53 this.orders = response.data; 54 }); 55 axios.get("https://euas.person.ee/user/orders/") 56 .then(response => { 57 this.test9 = response.data; 58 }); 59 } 60 61} 62</script> 63 64 65<style scoped> 66.option-image { 67 max-height: 75px; 68 max-width: 150px; 69} 70</style> 71 72

追記=============================================↓

完成イメージ↓
これはShoppingCartのページなので、本来の完成とは違いますが、My Orderページでもこのデザインと動揺に、Idが93の場合は、その中身(optionImage, Price, qty, Amount, total(amountの合計))が表示されるのが目標です.

イメージ説明

ShoppingCartのOrderNowのイベントハンドリングで、”/orders/”に保存され、その中で、特定のidをもつOrderを取り出すのが、最終目標です

ShoppingCartVue

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.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("https://euas.person.ee/user/carts/" + this.$root.$data.cart.id + "/orders/", 66 this.$root.$data.cart).then(function() { 67 data.reinitCart(); 68 }) 69 } 70 } 71} 72</script> 73 74 75<style scoped> 76.option-image { 77 max-height: 50px; 78 max-width: 100px; 79} 80</style> 81

mainJS

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' 14import OrderDetail from './components/OrderDetail.vue' 15 16 17Vue.config.productionTip = false 18Vue.use(BootstrapVue) 19Vue.use(VueRouter) 20 21const router = new VueRouter({ 22 routes: [{ 23 path: '/', 24 component: MainPage 25 }, 26 27 { 28 path: '/categories/:categoryAlias', 29 component: Category 30 }, 31 { 32 path: '/products/:productId', 33 component: ProductPage 34 }, 35 { 36 path: '/cart', 37 component: ShoppingCartPage 38 }, 39 { 40 path: '/order', 41 component: OrderListing 42 }, 43 { 44 path: '/orders/:orderId', 45 component: OrderDetail 46 } 47 ], 48 mode: 'history' 49}); 50 51axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com'; 52 53if (localStorage.cartId) { 54 axios.get("https://euas.person.ee/user/carts/" + localStorage.cartId).then(response => { 55 new Vue({ 56 render: h => h(App), 57 router: router, 58 data: { 59 cart: response.data, 60 saveCart() { 61 axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart) 62 }, 63 reinitCart() { 64 axios.post("https://euas.person.ee/user/carts/").then(response => { 65 localStorage.cartId = response.data.id 66 this.cart = response.data; 67 }); 68 } 69 } 70 }).$mount('#app') 71 }); 72} else { 73 axios.post("https://euas.person.ee/user/carts/").then(response => { 74 new Vue({ 75 render: h => h(App), 76 router: router, 77 data: { 78 cart: response.data, 79 saveCart() { 80 axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart) 81 }, 82 reinitCart() { 83 axios.post("https://euas.person.ee/user/carts/").then(response => { 84 localStorage.cartId = response.data.id 85 this.cart = response.data; 86 }); 87 axios.post("https://euas.person.ee/user/carts/" + this.cart.id + "/orders/").then(response => { 88 localStorage.cartId = response.data.id 89 this.cart = response.data; 90 }); 91 }, 92 getOrders(){ 93 axios.get("https://euas.person.ee/user/orders/").then(response => { 94 localStorage.orderId = response.data.id 95 this.cart = response.data; 96 }) 97 } 98 } 99 }).$mount('#app') 100 }); 101} 102

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

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

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

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

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

guest

回答2

0

ベストアンサー

まず、dataにtest9が宣言されていないです。

どういうテーブル設計かわかりませんが、リレーション繋い状態でデータ取得できないんでしょうか。

test9に諸々入ってるようなので
order.itemsの時点からなにもありませんよ。

test9.items[93]ですね。

あとpropの名称と重複してるので避けるべきです。

投稿2020/04/06 00:50

編集2020/04/06 00:56
mackintosh

総合スコア228

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

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

Eston

2020/04/06 01:31

回答ありがとうございます。ご指摘の通り修正しましたが、別のエラーが発生しました↓ [Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.test9.items[93]')" 追加の情報として、完成イメージと似たデザインになるShoppingCartページのコードを追加しました
mackintosh

2020/04/06 01:36

最初に言っていますpropが原因です。 OderDetailVueにはorderという名称でオブジェクト型を渡す必要があります。 そもそも使ってなさそうに見えるので以下不要なのでは?コンポーネントかと思いきやルートのようですし... ``` props: { order: Object }, ```
Eston

2020/04/06 16:30

propsを削除して、手直しした所、無事完成いたしました。初歩的な質問ですいませんでした ```OrderDetailVue <template> <div class="OrderListing"> <h2>Order Detail</h2> <table class="table"> <tr> <th>Product</th> <th>Price</th> <th>qty</th> <th>Amount</th> </tr> <tr v-for="(item, index) in this.order.items" :key="item.productId + '_' + index"> <td> <img :src="item.optionImage" class="option-image" /> </td> <td>{{ item.price }}</td> <td>{{ item.qty }}</td> <td>{{ item.total }}</td> </tr> <tr class="total-row"> <td>TOTAL:</td> <td></td> <td></td> <td>{{ total }}</td> </tr> </table> </div> </template> <script> import axios from "axios"; export default { name: 'OrderListing', computed: { items: function() { return this.$root.$data.cart.items || []; }, total: function() { let sum = 0 for (const item of this.items) { sum += item.total } return sum } }, data: function() { return { order:{} } }, mounted() { axios .get("https://euas.person.ee/user/orders/" + this.$route.params.orderId) .then(response => { this.order = response.data; }).catch(error => { console.log(error); }) } } </script> <style scoped> .option-image { max-height: 75px; max-width: 150px; } </style> ```
guest

0

削除。。。。。。。。

投稿2020/04/06 00:45

編集2020/04/06 01:54
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問