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

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

ただいまの
回答率

88.38%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 691

tenlife

score 48

初心者です。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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();

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/17 13:22

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

    キャンセル

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

  • ただいまの回答率 88.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る