将 eloquent 关系转换为 vue js 代码

Posted 2023-02-22

【中文标题】将 eloquent 关系转换为 vue js 代码

【英文标题】：Convert eloquent relationship into vue js code

【发布时间】：2016-09-14 07:55:05

【问题描述】：

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

预订控制器

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

【问题讨论】：

我在任何地方都看不到“数据”数组，您的控制器直接返回主题。因此，您可以尝试替换 self.subjects = subject.data; with self.$set('subjects', subject);反而？此外，您似乎期望前端有一组主题，但您在控制器中传递了一个主题？

@Denis Mysenko 感谢您的回复。我确实改变了 self.subjects = subject.data; with self.$set('subjects', subject);但仍然没有得到 subject_code 值。在控制器中，我返回 Student 和 SectionSubect Model 的关系，即 sectionSubjects。然后我做的是获取SectionSubject模型和Section Model的关系模型。这就是为什么在我的 form.blade.php 中我调用 reserved->section->section_code。我将在上面更新我的代码。

由于您期望一个数组，但返回单个项目，您也可以尝试 self.subjects.push(subjects);

@Denis Mysenko 尝试了您的解决方案，但我在控制台中收到此错误 评估表达式“subject.section.section_code”时出错：TypeError：无法读取未定义的属性“section_code”。使用推送时也是如此：all-3f2b98c050.js:23790 Uncaught (in promise) TypeError: self.subjects.push is not a function(...)

@Denis Mysenko 请在上面查看我更新的代码，谢谢。

【参考方案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。

希望这能解决你的问题。

【讨论】：

谢谢 @hardik-satasiya 我的 list.vue 产品，例如：

product.category.name