vue数组嵌套数组的问题

Question

如图，饼干、健康零食、早点下午茶、中式糕点、西式糕点是外层的数组，用v-for来完成，但是数组里面还有一个数组，这个还是用v-for吗？应该怎么做？我就是在v-for里面又用了一个v-for，代码如下

模板

<li
  class="productclassificationlist"
  v-for="list in productclassification">
  <div class="sublist_wrap">
      <span>{{ list.classificationname }}</span>
      <div class="icon"></div>
      <ul>
         <li
            v-for="item in classification">
            <a href="">
                <span>{{ list.item.food }}</span>
            </a>
         </li>
         <li class="div_clear"></li>
      </ul>
      <div class="div_clear"></div>
  </div>
</li>

js

productclassification: [
                    {
                        classificationname: '饼干',
                        classification: [
                            { food: '曲奇' },
                            { food: '威化' },
                            { food: '夹心饼干' },
                            { food: '焦糖饼干' }
                        ]
                    },
                    {
                        classificationname: '健康零食'
                    },
                    {
                        classificationname: '早点下午茶'
                    },
                    {
                        classificationname: '中式糕点'
                    },
                    {
                        classificationname: '西式糕点'
                    }
                ]

然后浏览器就报错了

求助大神，why？

Answer 1

你在第一个for循环吧productclassification 作为list循环，你第二个循环就要以list.classification来循环

Answer 2

classification改为list.classification，原因你应该能知道的。

Answer 3

写一个例子，然后你自己再跟你的对比一下你就知道了

<div v-for="(list, index) in item" :key="index">
    <span>{{list.name}}</span>
    <div v-for="(cell, key) in list.arr" :key="key">{{cell}}</div>
</div>

所对应的对象

item: [
    {
        name: 3,
        arr: [6, 5, 9]
    }
]

Answer 4

第二个v-for应该是v-for="item1 in item.classification

Answer 5

<ul id="itany">
    <li class="productclassificationlist" v-for="list in productclassification">
        <div class="sublist_wrap">
            <span>{{ list.classificationname }}</span>
            <div class="icon"></div>
            <ul>
                <li v-for="item in list.classification">
                    <a href="">
                        <span>{{ item.food }}</span>
                    </a>
                </li>
                <li class="div_clear"></li>
            </ul>
            <div class="div_clear"></div>
        </div>
    </li>
</ul>

换下list的位置到根元素就对了，这是因为根元素的作用域块才能找到list

Answer 6

把item in list.classification 改成 item in JSON.parse(list.classification) 我是这样的可以用了

Answer 7

请先将变量在data中返回， 可以点报错链接 看下文档