我需要创建一个剧院应用程序。我有一个包含两个数组的 JSON 文件。部分和组。我可以在我的 Vue 应用程序中加载两个数组，但我需要比较它们并找到匹配项。数组 1 包含座位，数组 2 包含预订。我使用一个简单的 v-for 属性来遍历第一个数组(部分)并且我能够显示结果/座位。我如何比较数组 1 和数组 2，例如，当对象相同且座位已被占用时，如何向座位添加一个类？
- 一个部分有名称、行和座位。
- 一个小组有一个名字、行数和一个座位。
在我看来，我必须检查名称中的连续座位是否与该部分匹配。如果是这样，我可以将 id 添加为一个类。
加载 JSON 数据的 JavaScript 部分
export default {
name: 'app',
data() {
return {
json: [],
}
},
mounted() {
axios({
method: "GET",
"url": url
}).then(result => {
this.json = result.data;
}, error => {
console.log(error);
});
},
}
显示部分的 HTML 循环，但不显示已占用的座位
<div v-for="(item, index) in json.sections" v-bind:key="index">
<h3>{{ item.name }}</h3>
<div v-for="(item, index) in item.rows" v-bind:key="index">
<div class="rownr">{{ item.row }} </div>
<div v-for="(item, index) in item.seats" v bind:key="index"v-bind:class=item.rank>
<div :class=item.row>
<div v-for="(group, index) in json.groups" v-bind:key="index">
<div v-for="(group, index) in group.seats" v-bind:key="index">{{ item.seat}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
JSON文件(部分)
{
"sections": [{
"name": "balcony",
"rows": [{
"row": "1",
"seats": [{
"seat": "1",
"rank": "rank1"
},
{
"seat": "3",
"rank": "rank1"
},
{
"seat": "4",
"rank": "rank1"
},
{
"seat": "2",
"rank": "rank1"
}
]
},
{
"row": "2",
"seats": [{
"seat": "1",
"rank": "rank1"
...
},
]
},
{
"name": "main hall",
"rows": [{
"row": "1",
"seats": [{
"seat": "1",
"rank": "rank1"
},
{
"seat": "3",
"rank": "rank3"
},
...
{
"row": "2",
"seats": [{
"seat": "1",
"rank": "rank2"
},
}
],
"groups": [{
"id": "1",
"seats": [{
"section": "main hall",
"row": "2",
"seat": "4"
},
{
"section": "main hall",
"row": "1",
"seat": "2"
}
]
},
{
"id": "2",
"seats": [{
"section": "main hall",
"row": "2",
"seat": "6"
},
{
"section": "main hall",
"row": "2",
"seat": "5"
}
]
}
]}
最佳答案
您可以改变 json 变量，以便 seats 部分使用 groupId 属性进行扩展，以防在 组部分:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) =>
json.sections.find(s => s.name == section)
.rows.find(r => r.row == row)
.seats.find(s => s.seat == seat)
.groupId = id
)
);
此代码假定 groups 部分中的座位引用 always 存在于 sections 部分中。如果没有，您将得到一个异常(exception)。
现在您可以在渲染循环中测试 groupId 属性是否存在并采取相应措施。
当出现无效座位时
如果您的 groups 数据引用了 sections 部分中不存在的部分、行或座位，则会抛出异常。如果您想获得有关缺少内容的更多详细信息，请使用此更详细的代码。它将列出有问题的部分/行/座位:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) => {
const foundSection = json.sections.find(s => s.name == section);
if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
const foundRow = foundSection.rows.find(r => r.row == row);
if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
const foundSeat = foundRow.seats.find(s => s.seat == seat);
if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
foundSeat.groupId = id;
})
);
根据该信息修正您的输入数据，以便可以为每个 座位进行匹配。
渲染
渲染部分可以使用 v-if 和 v-else 属性:
{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>
关于javascript - Vue，比较两个数组并检查结果是否匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53234860/