The problem of nesting arrays in vue arrays
as shown in the picture, biscuits, healthy snacks, breakfast and afternoon tea, Chinese pastry and Western pastry are outer arrays, completed with v-for, but there is still an array in the array. Is this still using v-for? What should I do? I just used another vMurfor in v-for, and the code is as follows
.
js
ask for help from the Great God, why?
you use productclassification
as the list loop in the first for loop, and you should use list.classification
to cycle
classification
to list.classification
. You should know the reason.
write an example, and then compare it with yours and you will know
<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>
The object corresponding to
item: [
{
name: 3,
arr: [6, 5, 9]
}
]
the second v-for should be "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>
just change the location of list to the root element. This is because the scope block of the root element can find list
.
change item in list.classification to item in JSON.parse (list.classification) I can use
Please return the variable in data first. You can click on the error link to see the document
.