EC2にデプロイすると配列がオブジェクトに変換され、this.items.slice is not a function というエラーが出る

Question

Laravel / Vue / AWS を用いてポートフォリオを作成しています。「単語一覧を表示する機能」を実装したいのですが、ローカルではうまく機能してたのですが、EC2上にデプロイしたところ表示がされなくなってしまいました。コンソールとMySQLを確認したところ、単語の追加と保存はできているので、表示だけうまくいかない状況です。

#環境

amazon linux 2
PHP 7.3.26
Laravel Framework 6.20.16
vue@2.6.12

#該当のコード

class WordController extends Controller
{
    public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return response()->json($words);
    
    }

data () {
      return {
        //取得したデータを配列に格納
        words: [],
　　　　　//以下略

// axiosを用いてデータを取得
requestMyWord: function() {
        axios.get('/api/word').then((res)=>{
          this.words = res.data;
          console.log(res.data);
        });
      },

現状上記のようにしていて、

Invalid prop: type check failed for prop "items". Expected Array, got Object

this.items.slice is not a function

という２つのエラーが出ています。

調べてみたところ原因としてはどちらも、「オブジェクトではなく配列で返せ」ということだと思うのですが、同じコードを書いているのにローカルで起動した際には配列、EC2にデプロイするとオブジェクトに変換されてしまいます。

ローカルで起動 ↓

EC2で起動　↓

#試してみたこと

とりあえず「オブジェクトを配列に返す」ことで改善されると思い、以下を試しました。

##① response()->json　で返す

public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return response()->json($words);

    }

参考　https://qiita.com/qiita-kurara/items/089db7349e33b9402b42

##② [] を使う

public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return [$word];

    }

参考　https://qiita.com/qiita-kurara/items/089db7349e33b9402b42

##③ array

public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return array($word);

    }

##④ toArray()

public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return $words->toArray();

    }

参考　https://readouble.com/laravel/5.8/ja/collections.html#method-toarray

##⑤ json_decode

  public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return $array = json_decode(json_encode($words), true);;

    }

https://qiita.com/ymm1x/items/f197ddd327356b1e9088#%E6%96%B9%E6%B3%952-get_object_vars-%E9%96%A2%E6%95%B0%E3%82%92%E4%BD%BF%E3%81%86

⑥ get_object_vars 関数

  public function index() {

        $user_id = Auth::id();
        $words = Word::all()->where('user_id', $user_id);
        return get_object_vars($words);;

    }

上記6点試してみましたが、相変わらずエラーが出る状態、または 「配列はできエラーは消えるが、配列の中にオブジェクトが生成される（？）状態になり、表示はされません。

自分が見落としてる点もあると思いますが、お力添えいただけると幸いです。
よろしくお願いいたします。

Comments

[Lulucom]

そのVueコンポーネントのitemsプロパティにどう値を渡しているかがわかるようなコードの掲載も必要ではないでしょうか。
以下のエラーが「不正なプロパティ: itemsプロパティの型チェックに失敗。配列を期待したのにオブジェクトだった」と言っているためです。
> Invalid prop: type check failed for prop "items". Expected Array, got Object

[Lulucom]

（すみません消しました）

Answer 1

$wordsの中身がクエリビルダのままになってしまっているのかと思います。
all()で取得されたコレクションをwhere()で絞り込むのではなく
以下のようにget()あるいはpaginate()の結果を返すようにするとどうでしょうか。

$words = Word::where('user_id', $user_id)->get();
// あるいは
$words = Word::where('user_id', $user_id)->paginate();

return $words;

Comments

[Lulucom]

ごめんなさい、たぶん、外していますね。ローカルでは正常に動くのでしたね。

[Take.Y]

Lulucom 様

$words = Word::where('user_id', $user_id)->get();

こちらで正常に表示されました！！
なぜデプロイした際に表示できなくなったのかは分かりませんが、、
お忙しい中ありがとうございました。

[Lulucom]

getやpaginateを書き忘れることってたまにありますよね。よかったです^ ^