如何使用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);
}

ReservationController.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"
    }
  }
]