灯下等雪
灯下等雪
  • 发布:2024-06-06 08:38
  • 更新:2024-06-06 08:47
  • 阅读:200

v-for是不是不支持二层及以上的嵌套

分类:uni-app x

我定义了一个镇和村的数据结构

复制代码type Cun = {  
    name : string  
    today : string  
    month : string  
}  
type Zhen = {  
    name : string  
    water : string  
    cun : Cun[]  
}  
const list = ref<Zhen[]>([  
{  
    "name": "横林镇",  
    "water": "5.2",  
    "cun": [  
        {  
            "name": "吴家村",  
            "today": "1.0",  
            "month": "100",  
        },  
        {  
            "name": "李家村",  
            "today": "2.0",  
            "month": "200",  
        },  
    ]  
}  
])

template标签部分

复制代码<view class="city-item" v-for="zhen in list" :key="zhen.name">  
    <view class="zhen-item">  
        <text style="font-weight: bold;font-size:24rpx;color:#333">{{zhen.name}}</text>  
    </view>  
    <view class="cun-item" v-for="(cun, index) in zhen" :key="index">  
        // 报错error: Unresolved reference: name‌  
        <view class="item-name">{{cun.name}}</view>  
        // 不报错,安卓模拟器可以展示cun的内容  
        <view class="item-name">{{cun}}</view>  
    </view>  
</view>
2024-06-06 08:38 负责人:无 分享
已邀请:
沈工

沈工

<view class="cun-item" v-for="(cun, index) in zhen" :key="index"> 这句改 <view class="cun-item" v-for="(cun, index) in zhen.cun" :key="index">应该可以帮你实现了

  • 灯下等雪 (作者)

    尴尬。犯了个低级错误

    2024-06-06 09:12

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容