uniapp中对于两层嵌套的 v-for如何定义动态数组并且调用
时间: 2024-12-24 15:20:55 浏览: 6
基于vue v-for 多层循环嵌套获取行数的方法
在uniApp中,如果你需要对一个包含两层嵌套的数据结构进行遍历,并且这个数据结构是动态生成的,你可以通过`v-for`指令结合数组的深度迭代来实现。假设你有一个类似这样的二维数组:
```json
data() {
return {
dynamicData: [
{ id: 1, items: [{ name: 'Item1-1'}, { name: 'Item1-2'}] },
{ id: 2, items: [{ name: 'Item2-1'}, { name: 'Item2-2'}] }
]
}
}
```
在模板中,你可以这样做:
```html
<view v-for="(parentItem, parentIndex) in dynamicData" :key="parentItem.id">
<view v-for="(childItem, childIndex) in parentItem.items" :key="childItem.name">
{{ childItem.name }}
</view>
</view>
```
在这里,外部的`v-for`遍历了`dynamicData`数组的第一个层级,而内部的`v-for`则遍历了每个父项(parentItem)的`items`属性。
如果你想动态地添加或删除元素,你需要确保你在对应的事件处理函数中更新`dynamicData`数组。例如,在添加新元素时:
```javascript
addNewItem(parentId) {
this.dynamicData.find(item => item.id === parentId).items.push({ name: 'New Item' });
}
```
同样,如果要删除元素,可以使用`Array.prototype.splice()`方法。
阅读全文