vue數(shù)組嵌套數(shù)組的問題

如圖，餅干、健康零食、早點下午茶、中式糕點、西式糕點是外層的數(shù)組，用v-for來完成，但是數(shù)組里面還有一個數(shù)組，這個還是用v-for嗎？應(yīng)該怎么做？我就是在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>

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

然后瀏覽器就報錯了

圖片描述

求助大神，why？

回答

編輯回答

尕筱澄

classification改為list.classification，原因你應(yīng)該能知道的。

2018年7月14日 15:33

編輯回答

枕頭人

你在第一個for循環(huán)吧productclassification 作為list循環(huán)，你第二個循環(huán)就要以list.classification來循環(huán)

2018年7月23日 10:48

編輯回答

尕筱澄

寫一個例子，然后你自己再跟你的對比一下你就知道了

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

所對應(yīng)的對象

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

2017年5月27日 21:19

編輯回答

毀了心

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

2017年4月19日 06:48

編輯回答

憶當年

第二個v-for應(yīng)該是v-for="item1 in item.classification

2018年5月1日 10:44

編輯回答

司令

請先將變量在data中返回，可以點報錯鏈接看下文檔

2017年2月21日 13:01

編輯回答

小曖昧

<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

2017年8月17日 20:29