Nested v-for (vue js) when fetching pivot table in laravel

Posted 3 years ago by jay_gorio

When fetching pivot table in laravel is much easier. However, when using the v-for in vue js is much harder. Can anyone help me how to convert my code into vue js. I have this model, that contains below code:

public function index()
    $courses = Course::with('sectionSubjects','',

    return $courses;

In my view,

@foreach($courses as $course)
    @foreach($course->sectionSubjects as $c)
        <td>{{ $course->name }}</td>
        <td>{{ $c->subject->subject_code }}</td>
        <td>{{ $c->pivot->semester }}</td>
        <td>{{ $c->pivot->year }}</td>
            <a href="" 
                class="btn btn-info btn-xs">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>

            <button type="button"
                    class="btn btn-danger btn-xs" 

                    <i class="fa fa-times" aria-hidden="true"></i>


Can anyone suggest how to achieve this in vue js.

Please sign in or create an account to participate in this conversation.