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と表示されたままです。
原因がわかる方、教えていただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/05 07:18
2019/07/05 07:44