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

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

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

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

Laravel

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

Laravel 5

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

Q&A

解決済

1回答

1934閲覧

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

Himamura

総合スコア39

Vue.js

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

Laravel

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

Laravel 5

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

0グッド

0クリップ

投稿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

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

List.vue

PHP

1<template> 2 <div class="productList"> 3 <vuetable 4 ref="vuetable" 5 api-url="api/products" 6 :http-fetch="myFetch" 7 :fields="fields" 8 :append-params="moreParams" 9 pagination-path="" 10 @vuetable:pagination-data="onPaginationData" 11 ></vuetable> 12 <vuetable-pagination 13 ref="pagination" 14 @vuetable-pagination:change-page="onChangePage" 15 :css="css" 16 ></vuetable-pagination> 17 </div> 18</template> 19 20<script> 21import { Vuetable, VuetablePagination } from "vuetable-2"; 22export default { 23 components: { 24 Vuetable, 25 VuetablePagination 26 }, 27 data() { 28 return { 29 productList: {}, 30 css: { 31 wrapperClass: "pagenation", 32 activeClass: "active", 33 disabledClass: "disabled", 34 icons: { 35 first: "glyphicon glyphicon-backward", 36 prev: "glyphicon glyphicon-triangle-left", 37 next: "glyphicon glyphicon-triangle-right", 38 last: "glyphicon glyphicon-forward" 39 }, 40 }, 41 fields: [ 42 { 43 name: 'code', 44 title: '商品コード', 45 sortField: 'code', 46 }, 47 { 48 name: 'name', 49 title: '商品名', 50 sortField: 'name', 51 }, 52 ], 53 moreParams: { 54 sort: 'code', 55 order: 'asc', 56 }, 57 }; 58 }, 59 methods: { 60 myFetch (apiUrl, httpOptions) { 61 const response = axios.get(apiUrl, httpOptions); 62 console.log(response); 63 return response; 64 }, 65 onSearch () { 66 this.$nextTick(function() { 67 this.$refs.vuetable.refresh(); //:http-fetchに設定されたmethod(myFetch)が呼ばれる(後述) 68 }); 69 }, 70 onPaginationData (paginationData) { 71 this.$refs.pagination.setPaginationData(paginationData); 72 }, 73 onChangePage (page) { 74 this.$refs.vuetable.changePage(page); 75 }, 76 }, 77}; 78</script>

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

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

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

非同期処理関係がうまくいっていない気がするので、公式ドキュメントのサンプルプログラムを確認してみてください。
API mode and Data mode

投稿2019/07/05 06:15

aro10

総合スコア4106

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

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

Himamura

2019/07/05 07:18

ご回答ありがとうございます。 データモードにし、手動で取得することで解決しました!
aro10

2019/07/05 07:44

????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問