laravel - vue jsとvue-resourceを使ってlaravelピボットテーブルのデータを取得する方法

Question

ピボット テーブルを使用しているこのプロジェクトがあります。ただし、 vue リソースと vue js を使用して ReservationController でデータをフェッチすると、機能していないようです。以下のコードを参照してください。ピボット テーブルでデータを取得する正しい方法は何ですか?

更新: これが私のモデルとテーブルです: Student.php

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

SectionSubject.php

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

section_subject_student テーブル

    Schema::create('section_subject_student', function (Blueprint $table) {
        $table->increments('id');

        $table->integer('student_id')->unsigned();
        $table->integer('section_subject_id')->unsigned();

        $table->foreign('student_id')
              ->references('id')
              ->on('students')
              ->onDelete('cascade');

        $table->foreign('section_subject_id')
              ->references('id')
              ->on('section_subject')
              ->onDelete('cascade');

        $table->timestamps();
    });

対象モデル

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

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

断面モデル

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

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

予約コントローラー.php

public function index()
{
    $secSubs = Student::find(1);
    return $secSubs->sectionSubjects;

}

all.js

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

data: {

    subjects: []

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

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

}

});

最後に、これが私の index.view です。ここでは、ピボット テーブルにすべてのデータを表示したいと考えています。laravel の foreach メソッドを使用する場合のコードは次のとおりです。しかし、vue js (v-for) を使用してデータを取得したいと考えています。誰でもこれについて私を助けてもらえますか?

 @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

          </body>

クラブリーの提案への出力

[
  {
    "id": 1,
    "section_id": 1,
    "subject_id": 1,
    "schedule": "MWF 9:00 - 10:00 am",
    "room_no": "M305",
    "pivot": {
      "student_id": 1,
      "section_subject_id": 1,
      "created_at": "2016-05-17 01:52:37",
      "updated_at": "2016-05-17 01:52:37"
    }
  },
  {
    "id": 4,
    "section_id": 2,
    "subject_id": 1,
    "schedule": "MWF 1:00 - 2:00 pm",
    "room_no": "M303",
    "pivot": {
      "student_id": 1,
      "section_subject_id": 4,
      "created_at": "2016-05-17 01:52:46",
      "updated_at": "2016-05-17 01:52:46"
    }
  },
  {
    "id": 5,
    "section_id": 2,
    "subject_id": 2,
    "schedule": "MWF 2:00 - 3:00 pm",
    "room_no": "M305",
    "pivot": {
      "student_id": 1,
      "section_subject_id": 5,
      "created_at": "2016-05-17 01:52:56",
      "updated_at": "2016-05-17 01:52:56"
    }
  }
]