v-for insert second v-for child

Question

I have 2 tables in JSON containing the following.

First table:

[
    {"Id": "1", "name": "Joe"},
    {"Id": "2", "name": "Mark"}
]

Second table:

[
    {"Student": "1", "note": "5", "assessment": "1"},
    {"Student": "1", "note": "6", "assessment": "2"},
    {"Student": "1", "note": "7", "assessment": "3"},
    {"Student": "1", "note": "8", "assessment": "4"},
    {"Student": "2", "note": "3", "assessment": "1"},
    {"Student": "2", "note": "5", "assessment": "2"},
    {"Student": "2", "note": "8", "assessment": "3"},
    {"Student": "2", "note": "9", "assessment": "4"}
]

How do I render such data

Student: Jose
Evaluation 1 | Note 5
Evaluation 2 | Note 6
Evaluation 3 | Note 7
Evaluation 4 | Note 8

Student: Mark
Evaluation 1 | Note 3
Evaluation 2 | Note 5
Evaluation 3 | Note 8
Evaluation 4 | Note 9

I'm using the v-resource to consume JSON per GET and I can make the first FOR

<Div v-for = "student in students">
    Student {{student.name}}
    ???
</ Div>

What would be the best way to put this second associated with the student to get your note?

Answer 1

<div v-for="student in students">
    Student: {{ student.name }}
    <template v-for="note in notes">
        <div v-if="note.Student == student.Id">
            Note {{ note.note }} | Assessment {{ note.assessment }}
       </div>
    </template>
</div>

Answer 2

You should not mix 'v-for' with 'v-if' It will be better version:

<div v-for = "student in students">
    Student: {{student.name}}
    <div v-for = "note in notes">
        <div v-if ="note.Student == student.Id">
            Note {{note.note}} | Assessment {{ note.assessment}} 
        </div>       
    </div>
</div>