javascript - 带有嵌套项的 Vue V-For 循环
问题描述
我正在尝试 v-for 一个带有嵌套项的数组:
这是主数组:
export default {
data () {
return {
arr: [{
mainId: 8,
subItems: [{
subId: 1,
subSubItems: {
subSubId: 1,
name: 'Name1'
}
}]
}, {
mainId: 5,
subItems: [{
subId: 2,
subSubItems: {
subSubId: 3,
name: 'Name2'
}
},
{
subId: 3,
subSubItems: {
subSubId: 4,
name: 'Name3'
}
}]
}]
}
}
}
我试图像这样循环遍历这个数组:
<v-card v-for="subItem in arr" :key="subItem.mainId">
{{subItem.mainId}}
<p v-for="subSubItem in subItem.subSubId" :key="subSubItem.subSubId"></p>
{{subSubItem.name}}
</v-card>
但不幸的是,我没有得到任何输出:控制台错误:“无法读取未定义的属性 'subSubId'”
我在这里犯了什么错误?
解决方案
试试这个:
new Vue({
el:"#app",
data: {
arr: [
{
mainId: 8,
subItems: [
{
subId: 1,
property: {
subSubId: 1,
name: 'Name1'
}
}]
},
{
mainId: 5,
subItems: [{
subId: 2,
property: {
subSubId: 3,
name: 'Name2'
}
},
{
subId: 3,
property: {
subSubId: 4,
name: 'Name3'
}
}
]
}]
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in arr" :key="item.mainId">
MainId : {{item.mainId}}
<p v-for="subitem in item.subItems" :key="subitem.subId">
SubItem Name : {{subitem.property.name}}
<hr/>
</p>
</div>
</div>
</body>
</html>
推荐阅读
- sql - 在 SQL Server 2017 中添加新列并将 GETDATE 设置为值
- moodle - Moodle 规则类型
- python - 唯一导入 * 只允许在模块级别
- java - 将由ArrayList的数字和单词组成的String转换为int java
- python - Python:是否有一个循环函数来总结这一点?
- mongodb - Mongo DB搜索查询不给出结果
- niagara-4 - 如何在 Niagara-4 中获取站点正常运行时间(开始时间)信息?
- api - 什么是合适的 woo-commerce API 来创建带有归属的订单
- c++ - 在 std::qsort 的比较函数中处理错误情况
- ruby - IO.pipe 上的 Ruby readpartial 不会引发 EOFError