v-for insert second v-for child

Question

У меня есть 2 таблицы в JSON, содержащие следующее.

Первая таблица:

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

Второй стол:

[ 
    {"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"} 
] 

Как делают такие данные

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 

Я использую V-ресурс, чтобы потреблять JSON за GET и я могу сделать первый FOR

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

Что было бы лучшим способом связать эту вторую тему со студентом, чтобы получить заметку?

Answer 1

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

</Div>