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

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

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

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

Vue CLI

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

Node.js

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

Webサイト

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

解決済

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

Eston
Eston

総合スコア0

Vue.js

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

Vue CLI

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

Node.js

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

Webサイト

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

2回答

0評価

0クリップ

842閲覧

投稿2020/04/05 23:28

編集2022/01/12 10:58

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

現在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

<template> <div class="OrderListing"> <h2>Order Detail</h2> <table class="table"> <tr> <th>OrderId</th> <th>Product</th> <th>Price</th> <th>qty</th> <th>Amount</th> </tr> <tr v-for="order in this.orders" :key="order.id"> <td>{{order}}</td> <td>{{test9}}</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 } }, props: { order: Object }, data: function() { return { orders: [] } }, mounted() { axios.get("https://euas.person.ee/user/orders/" + this.$route.params.orderId) .then(response => { this.orders = response.data; }); axios.get("https://euas.person.ee/user/orders/") .then(response => { this.test9 = response.data; }); } } </script> <style scoped> .option-image { max-height: 75px; max-width: 150px; } </style>

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

イメージ説明

ShoppingCartVue

<template> <div class="shopping-cart-page"> <h2>ShoppingCart</h2> <table class="table"> <tr> <th>Product</th> <th>Price</th> <th>qty</th> <th>Amount</th> <th>Actions</th> </tr> <tr v-for="(item, index) in this.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> <td> <b-button variant="danger" @click="removeItem(index)">Remove</b-button> </td> </tr> <tr class="total-row"> <td>TOTAL:</td> <td></td> <td></td> <td>{{ total }}</td> <td></td> </tr> </table> <b-button variant="success" size="lg" @click="orderNow" v-if="this.items.length">Order Now!</b-button> </div> </template> <script> import axios from "axios"; export default { name: 'ShoppingCartPage', 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 } }, methods: { removeItem: function(index) { if (!this.$root.$data.cart.items) this.$root.$data.cart.items = [] this.$root.$data.cart.items.splice(index, 1); console.log(this.$root.$data.cart.items); this.$root.$data.saveCart(); }, orderNow: function() { let data = this.$root.$data axios.post("https://euas.person.ee/user/carts/" + this.$root.$data.cart.id + "/orders/", this.$root.$data.cart).then(function() { data.reinitCart(); }) } } } </script> <style scoped> .option-image { max-height: 50px; max-width: 100px; } </style>

mainJS

import Vue from 'vue' import App from './App.vue' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' import VueRouter from 'vue-router' import MainPage from './components/MainPage.vue' import ProductPage from './components/ProductPage.vue' import Category from './components/Category.vue' import axios from "axios"; import ShoppingCartPage from './components/ShoppingCartPage.vue' import OrderListing from './components/OrderListing.vue' import OrderDetail from './components/OrderDetail.vue' Vue.config.productionTip = false Vue.use(BootstrapVue) Vue.use(VueRouter) const router = new VueRouter({ routes: [{ path: '/', component: MainPage }, { path: '/categories/:categoryAlias', component: Category }, { path: '/products/:productId', component: ProductPage }, { path: '/cart', component: ShoppingCartPage }, { path: '/order', component: OrderListing }, { path: '/orders/:orderId', component: OrderDetail } ], mode: 'history' }); axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com'; if (localStorage.cartId) { axios.get("https://euas.person.ee/user/carts/" + localStorage.cartId).then(response => { new Vue({ render: h => h(App), router: router, data: { cart: response.data, saveCart() { axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart) }, reinitCart() { axios.post("https://euas.person.ee/user/carts/").then(response => { localStorage.cartId = response.data.id this.cart = response.data; }); } } }).$mount('#app') }); } else { axios.post("https://euas.person.ee/user/carts/").then(response => { new Vue({ render: h => h(App), router: router, data: { cart: response.data, saveCart() { axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart) }, reinitCart() { axios.post("https://euas.person.ee/user/carts/").then(response => { localStorage.cartId = response.data.id this.cart = response.data; }); axios.post("https://euas.person.ee/user/carts/" + this.cart.id + "/orders/").then(response => { localStorage.cartId = response.data.id this.cart = response.data; }); }, getOrders(){ axios.get("https://euas.person.ee/user/orders/").then(response => { localStorage.orderId = response.data.id this.cart = response.data; }) } } }).$mount('#app') }); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vue CLI

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

Node.js

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

Webサイト

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