Convert eloquent relationship into vue js code

Question

I have this project that should fetch values from a pivot table and one to many relationship. When using the eloquent syntax I am getting the correct output as seen here:

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

However I want to make use of the feature of vue js so that my page will automatically be populated with value being fetch as seen below.

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>

As seen in my form.blade.php I cannot get the value of section_code. Am I missing something here?

UPDATE: SectionSubject Model

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);
    }

}

Student Model

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

Section Model

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

it is not problem of laravel or vuejs.

this code.

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

you can see this ajax request will get answer in json.

and json is pretty much static content. as "Eloquent" within php scope its an object so if you ask relational data from it, it will execute call and return its relational data but json can not do that.

so to make it work you need to convert whole relational data and create one massive array which holds all relational data then encode it.

for example :

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

now if you return this it will contain "user.roles.name" this value as we eagerly loaded that and converted to json.

in you case :

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

now you can use subjects and loop it "subject.section.section_code" as section is eagerly loaded and added to array and converted to json.

I hope this will solve your problem.