将雄辩的关系转换为Vue JS代码 [英] Convert eloquent relationship into vue js code

问题描述

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

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

ReservationController

public function index()
{
    $secSubs = Student::find(1);

    return $secSubs->sectionSubjects;

}

form.blade.php

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的功能，以便自动填充我的页面，如下所示.

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

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的值.我在这里想念什么吗?

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

更新: SectionSubject模型

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

}

学生模型

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

推荐答案

这不是laravel或vuejs的问题.

it is not problem of laravel or 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中得到答案.

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

和json几乎是静态内容.作为php范围内的口才"，它是一个对象，因此，如果您向其询问关系数据，它将执行调用并返回其关系数据，但是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.

例如:

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

现在，如果您返回此值，它将包含"user.roles.name"此值，因为我们急切地加载了该值并将其转换为json.

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

在您的情况下:

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

现在，您可以使用主题并将其循环显示为"subject.section.section_code"，因为该部分已被急切加载并添加到数组中并转换为json.

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.

这篇关于将雄辩的关系转换为Vue JS代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！