update - pwa laravel vue

Convierta una relación elocuente en el código vue js

Question

Tengo este proyecto que debe obtener valores de una tabla dinámica y una relación de muchos. Cuando uso la sintaxis elocuente obtengo el resultado correcto como se ve aquí:

ReservationController

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

Sin embargo, quiero hacer uso de la función de vue js para que mi página se rellene automáticamente con el valor que se obtiene como se ve a continuación.

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>

Como se ve en mi form.blade.php, no puedo obtener el valor de section_code. ¿Me estoy perdiendo de algo?

ACTUALIZACIÓN: 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);
}
}

Modelo de estudiante

public function sectionSubjects()
{
return $this->belongsToMany(SectionSubject::class,''section_subject_student'', ''student_id'',''section_subject_id'')
->withTimestamps();
}

Modelo de sección

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

no es problema de laravel o vuejs.

este código

 this.$http({
url: ''http://localhost:8000/reservation'',
method: ''GET''
}).then(function (subjects){
self.subjects = subjects.data;
console.log(''success'');
}, function (response){
console.log(''failed'');
});

puedes ver que esta solicitud de ajax recibirá respuesta en json.

y json es más o menos contenido estático. como "Eloquente" dentro del alcance de php es un objeto así que si le pides datos relacionales, ejecutará la llamada y devolverá sus datos relacionales pero json no puede hacer eso.

así que para hacerlo funcionar, necesitas convertir datos relacionales completos y crear una matriz masiva que contenga todos los datos relacionales y luego codificarlos.

por ejemplo :

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

ahora si devuelve esto, contendrá "user.roles.name" este valor, ya que lo cargamos ansiosamente y lo convertimos en json.

en tu caso:

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

ahora puede usar temas y recorrerlo en "subject.section.section_code" ya que la sección se carga con entusiasmo y se agrega a la matriz y se convierte en json.

Espero que esto resuelva tu problema.