H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue数组嵌套数组的问题

如图,饼干、健康零食、早点下午茶、中式糕点、西式糕点是外层的数组,用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?

回答:

你在第一个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) 我是这样的可以用了

本文地址:H5W3 » vue数组嵌套数组的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址