Question

我在JSON中有2个包含以下内容的表。

第一张表：

[
    {"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-resource来消耗每个GET的JSON，我可以创建第一个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>

Answer 2

您不应将“ v-for”与“ v-if”混合使用会是更好的版本：

<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>

v-for insert second v-for child

2 个答案: