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','sectionSubjects.courses',
                 'sectionSubjects.section', 
                 'sectionSubjects.subject')->get();

    return $courses;
}

In my view,

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

            <button type="button"
                    class="btn btn-danger btn-xs" 
                    v-on:click="deleteSectionSubject($index,sectionSubject)">

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

            </a>
        </td>
    </tr>
    @endforeach
@endforeach

Can anyone suggest how to achieve this in vue js.

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