雄弁な関係をvue jsコードに変換する

Question

私はピボットテーブルと1対多の関係から値をフェッチすべきこのプロジェクトを持っています。 ReservationController

public function index() 
{ 
    $secSubs = Student::find(1); 

    return $secSubs->sectionSubjects; 

} 

form.blade.php

@inject('reservation', 'App\Http\Controllers\ReservationController') 
@foreach($reservation->index() as $reserved) 
<tr> 
    <td>{{ $reserved->section->section_code }}</td> 
    <td>{{ $reserved->subject->subject_code }}</td> 
    <td>{{ $reserved->subject->subject_description }}</td> 
    <td>{{ $reserved->schedule }}</td> 
    <td>{{ $reserved->subject->units }}</td> 
    <td>{{ $reserved->room_no }}</td> 
    <td> 
    <button class="btn btn-xs btn-danger">Delete</button> 
    </td> 
</tr> 
@endforeach 

しかし私が欲しい：雄弁な構文を使用する場合は、ここで見られるように、私は正しい出力を取得しています私のページが自動的に表示されるようにvue jsの機能を利用する下記のように値がフェッチされます。

new Vue({ 
el: '#app-layout', 

data: { 

    subjects: [] 

}, 
ready: function(){ 
    this.fetchSubjects(); 
}, 
methods:{ 

    fetchSubjects: function(){ 
     var self = this; 

     this.$http({ 
      url: 'http://localhost:8000/reservation', 
      method: 'GET' 
     }).then(function (subjects){ 
      self.subjects = subjects.data; 
      console.log('success'); 
     }, function (response){ 
      console.log('failed'); 
     }); 
    }, 

} 
}); 

私form.blade.phpに見られるように

<tr v-for="subject in subjects"> 
    <td>@{{ subject.section.section_code }}</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>@{{ subject.room_no }}</td> 
    <td> 
    <button class="btn btn-xs btn-danger">Delete</button> 
    </td> 
</tr> 

form.blade.php私はsection_codeの値を取得することはできません。私はここに何かを逃していますか

UPDATE： SectionSubjectモデル

class SectionSubject extends Model 
{ 
    protected $table = 'section_subject'; 

    public function students() 
    { 
     return $this->belongsToMany(Student::class, 'section_subject_student','section_subject_id','student_id' 
      )->withTimestamps(); 
    } 

    public function assignStudents(Student $student) 
    { 
     return $this->students()->save($student); 
    } 

    public function subject() 
    { 
     return $this->belongsTo(Subject::class); 
    } 

    public function section() 
    { 
     return $this->belongsTo(Section::class); 
    } 

} 

学生モデル

public function sectionSubjects() 
    { 
     return $this->belongsToMany(SectionSubject::class,'section_subject_student', 'student_id','section_subject_id') 
     ->withTimestamps(); 
    } 

セクションモデル

class Section extends Model 
{ 
    public function subjects() 
    { 
     return $this->belongsToMany(Subject::class)->withPivot('id','schedule','room_no'); 
    } 

    public function sectionSubjects() 
    { 
     return $this->hasMany(SectionSubject::class); 
    } 
} 

Answer 1

はそれがlaravelまたはvuejsの問題ではありません。

このコード。

this.$http({ 
     url: 'http://localhost:8000/reservation', 
     method: 'GET' 
    }).then(function (subjects){ 
     self.subjects = subjects.data; 
     console.log('success'); 
    }, function (response){ 
     console.log('failed'); 
    }); 

このajaxリクエストはjsonで回答を得ることがわかります。

jsonはかなり静的なコンテンツです。 phpスコープ内の "Eloquent"としてそのオブジェクトを指定します。そのため、リレーショナルデータを要求すると、呼び出しを実行してリレーショナルデータを返しますが、jsonはそれを行うことはできません。

このようにするには、リレーショナルデータ全体を変換し、すべてのリレーショナルデータを保持する大規模な配列を作成してエンコードする必要があります。例えば

：あなたがこれを返す場合、我々は熱心にそれをロードし、JSONに変換するよう

$user = App\User::with('roles')->first(); 
return $user->toJson(); 

、今では「user.roles.name」この値が含まれます。あなたの場合は

：セクションには、熱心にロードされ、配列に追加し、JSONに変換されるよう

$subjects = App\Reservation::with('section')->all(); 
return $subjects->toJson(); 

今あなたが主題とループ、それを「subject.section.section_code」を使用することができます。

これがあなたの問題を解決することを願っています。