1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

LaravelとVueの連携、Array型からObject型になってしまう問題の解決

Last updated at Posted at 2021-03-12

#バージョン
Laravel 6.20.2
Vue.js 2.6.12

#問題
LaravelからVueに値を渡した際に、
マイグレーションで作成した初期値の値は正しく表示されるが、
追加した値は正しく表示されない問題が発生した。

検証モードで詳しくみたところ、dataがArray型からObject型に変わってしまうのが原因だと思われます。

検証モード画像
[良い例] dataがArray型になっている。
スクリーンショット 2021-03-12 15.06.21.png

[悪い例] dataがObject型になっている。その他、特に変わったところはありません。
スクリーンショット 2021-03-12 15.05.38.png

#原因
DBからデータ取得後に配列をソートすると、キーが0から始まらなくなるのが原因のようです。
Vue.jsの仕様のようなのですが、詳しい記述は見つからなかったので、
原因は参考程度でお願いします。

コメントにて@nunulk さんより原因の詳細を教えて頂きました。
コメントありがとうございます。

正しくはLaravel と PHP の問題で、
sortByでソートした場合、ソート後にキーを維持してしまい、配列でなく連想配列になるのが原因でした。
(詳細はコメントを確認下さい。)

#コード例
getメソッドの前にクエリビルダのorderByで整列しておくのが重要です。

Controller.php
//[Array型になる良い例]  (orderByメソッドのあとにget() )
public function index(){
$tutorials = Auth::user()->tutorials()->orderBy('created_at')->get();


//[Object型になってしまう悪い例]  (get()したあとにsortByDescメソッド)
$tutorials = Auth::user()->tutorials()->get()->sortByDesc('created_at');


 return [
       'tutorials' => $tutorials,
 ];
}
index.blade.php
      <tutorial
      :initial-title='@json($tutorials)'
      >
      </tutorial>
Tutorial.vue
<script>
export default {
  props: {
    initialTitle:{
      type:Array,
      default:[]
    },
  },
  data(){
    return {
      getLists:this.initialTitle,
    }
  }
}
},

#Collectionを使った場合 (クエリビルダ orderByを使わない場合)
コレクションに対してvalues()メソッドを使う場合も、同じような処理ができます。
valuesメソッドはキーをリセット後、連続した整数にした新しいコレクションを返します。

Controller.php

public function index(){
$tutorials = Auth::user()->tutorials()->get()->sortByDesc('created_at');

 return [
       'tutorials' => $tutorials->values(),  //valuesメソッドを使用
 ];
}

#最後に
Laravelの参考書等を調べても載っていないような情報だったので共有してみました。
もし内容に間違い等あればコメント頂けると幸いです。

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?