带有嵌套项目的 Vue V-For 循环

Question

我正在尝试 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>

但不幸的是我没有得到任何输出：控制台错误："Cannot read property 'subSubId' of undefined"

我这里犯了什么错误？

Answer 1

试试这个：

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>

Answer 2

您的代码是正确的，但有一些错别字：

<v-card v-for="subItem in arr" :key="subItem.mainId">
  {{subItem.mainId}}
  <p v-for="subSubItem in subItem.subItems" :key="subSubItem.subId">
    {{subSubItem.subSubItems.name}}
  </p>
</v-card>

因为 subItem.subSubId 事件不存在，它必须是 subItem.subItems 并且您正在 <p> 标签外设置 {{subSubItem.name}}（也不存在）。所以，我已经改变了你的代码。希望对你有帮助。

带有嵌套项目的 Vue V-For 循环

Vue V-For Loop with nested Items

javascript

vue.js

v-for