【Vue】vue数组嵌套数组的问题

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

【Vue】vue数组嵌套数组的问题

模板

<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: '西式糕点'
}
]

然后浏览器就报错了

【Vue】vue数组嵌套数组的问题

求助大神，why？

回答

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

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

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

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

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

<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

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

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

以上是 【Vue】vue数组嵌套数组的问题 的全部内容， 来源链接： utcz.com/a/77857.html

回到顶部