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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Model

MVCモデルの一部であるModelはアプリケーションで扱うデータとその動作を管理するために扱います。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Q&A

解決済

1回答

1708閲覧

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

tenlife

総合スコア70

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Model

MVCモデルの一部であるModelはアプリケーションで扱うデータとその動作を管理するために扱います。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

0グッド

1クリップ

投稿2020/03/16 23:05

初心者です。

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

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

error

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

controller

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

blade

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

vue

1<template> 2 <div class="card" style="width: 18rem;" > 3 <div class="container" v-for="task in tasks" :key="task.id"> 4 <div class="card-header"> 5 Featured 6 </div> 7 <ul class="list-group list-group-flush"> 8 <li class="list-group-item">{{task.title}}</li> 9 <li class="list-group-item">{{task.content}}</li> 10 <li class="list-group-item">{{task.date}}</li> 11 <li class="list-group-item">{{task.rider.name}}</li> 12 </ul> 13 </div> 14 </div> 15</template> 16 17<script> 18export default { 19 props: { 20 tasks: { 21 type: Array, 22 default: '', 23 required: false 24 } 25 } 26} 27</script>

model

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

model

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

チェックしたもの
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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

php

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

投稿2020/03/17 01:22

編集2020/03/17 06:50
hayato7

総合スコア1135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tenlife

2020/03/17 04:22

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問