vue.jsでリレーション関係にあるユーザーの名前が取れない

Question

初心者です。

laravelのコントローラー => blade => vueという順番で変数（配列)を渡して使っています。

vueで使用するときにリレーション関係にあるはずのnameが取れません。
rider_idはtaskモデルに入っているのは確認できました。
"id" => 16
"rider_id" => 4
"title" => "ああああああ"

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
TypeError: Cannot read property 'name' of undefined

public function show($id)
    {
        $user = Auth::user($id);
        $tasks = $user->tasks()->get();
        return view('rider.show')->with('tasks',$tasks);
    }

@extends('layouts.rider.app')
@section('content')
<mypage-component v-bind:tasks="{{$tasks}}"></mypage-component>
@endsection

<template>
  <div class="card" style="width: 18rem;" >
    <div class="container" v-for="task in tasks" :key="task.id">
      <div class="card-header">
        Featured
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">{{task.title}}</li>
        <li class="list-group-item">{{task.content}}</li>
        <li class="list-group-item">{{task.date}}</li>
        <li class="list-group-item">{{task.rider.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tasks: {
      type: Array,
      default: '',
      required: false
    }
  }
}
</script>

public function rider()
    {
        return $this->belongsTo('App\Models\Rider', 'rider_id', 'id', 'riders');
    }

public function tasks()
    {
        return $this->hasMany('App\Models\Task');
    }

チェックしたもの
https://stackoverflow.com/questions/49943702/vue-warn-error-in-render-typeerror-cannot-read-property-name-of-undefine

どこに原因があるのか突き止められませんでした。

知恵をお借りしたいです。

vue 2.6.11
laravel 6.0
php 7.4.2

Answer 1

"TypeError: Cannot read property 'name' of undefined"

こちらのエラーの意味は「undefinedにnameプロパティはありません」というものになります。
つまり、task.riderがundefinedになっており、データがうまく取得できていません。

なので、vue側で{{task->rider->name}}としてriderを呼び出す必要があります。
ただこのやり方だと、N+1問題が発生してしまうので、
コントローラーでtasksデータを取得する際に、一緒にriderのデータも取得しておくのが良いと思います。

 $tasks = $user->tasks()->with('rider')->get();

Comments

[tenlife]

丁寧に説明ありがとうございます。
riderのテーブルを指定してあげると良かったんですね。
ありがとうございました！