Question

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

ReservationController

@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

form.blade.php

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

}
});

但是我想利用vue js的功能，以便我的页面将自动填充值，如下所示。

<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

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

}

从我的form.blade.php中可以看出，我无法获得section_code的值。我在这里错过了什么吗？

更新： SectionSubject Model

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

部分模型

{{1}}

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。

我希望这能解决你的问题。

将eloquent关系转换为vue js代码

1 个答案: