laravel - 将 Eloquent 关系转化为vue js代码

Question

我有这个项目，应该从数据透视表和一对多关系中获取值。当使用 Eloquent 语法时，我得到了正确的输出，如下所示:

预订 Controller

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 的值。我在这里遗漏了什么吗？

更新: 部分主题模型

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 不能这样做。

因此，要使其正常工作，您需要转换整个关系数据并创建一个包含所有关系数据的大型数组，然后对其进行编码。

例如:

$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”，因为部分会被急切地加载并添加到数组并转换为 json。

希望这能解决您的问题。