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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

解決済

Laravel + Vue.js + vuetable-2 でaxiosからデータが取れているのにvuetableに反映されない

Himamura
Himamura

総合スコア15

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

1回答

0評価

0クリップ

1221閲覧

投稿2019/07/05 05:56

Laravel 5.8 + Vue.js 2系で、取得したデータをvuetable-2を使って表示したいと考えております。

https://techblog.forgevision.com/entry/2018/10/15/111654

こちらのサイトを参考に、以下のようなコードを書きました。若干省略してます。

ProductController.php

PHP

public function index(Request $request) { $products = Product::select(['code', 'name'])->get(); return $products ?? abort(404); }

List.vue

PHP

<template> <div class="productList"> <vuetable ref="vuetable" api-url="api/products" :http-fetch="myFetch" :fields="fields" :append-params="moreParams" pagination-path="" @vuetable:pagination-data="onPaginationData" ></vuetable> <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage" :css="css" ></vuetable-pagination> </div> </template> <script> import { Vuetable, VuetablePagination } from "vuetable-2"; export default { components: { Vuetable, VuetablePagination }, data() { return { productList: {}, css: { wrapperClass: "pagenation", activeClass: "active", disabledClass: "disabled", icons: { first: "glyphicon glyphicon-backward", prev: "glyphicon glyphicon-triangle-left", next: "glyphicon glyphicon-triangle-right", last: "glyphicon glyphicon-forward" }, }, fields: [ { name: 'code', title: '商品コード', sortField: 'code', }, { name: 'name', title: '商品名', sortField: 'name', }, ], moreParams: { sort: 'code', order: 'asc', }, }; }, methods: { myFetch (apiUrl, httpOptions) { const response = axios.get(apiUrl, httpOptions); console.log(response); return response; }, onSearch () { this.$nextTick(function() { this.$refs.vuetable.refresh(); //:http-fetchに設定されたmethod(myFetch)が呼ばれる(後述) }); }, onPaginationData (paginationData) { this.$refs.pagination.setPaginationData(paginationData); }, onChangePage (page) { this.$refs.vuetable.changePage(page); }, }, }; </script>

取得したデータをvue側でconsole.logした結果、axiosですのでpromiseで取得されます。
promise内にはPromiseValue->dataの中に正常に値が取れています。
vuetableにはpromiseを渡すようにする必要があるのでそのまま渡しています。

ですが、vuetableの方はno data availableと表示されたままです。

原因がわかる方、教えていただければ幸いです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。