uniapp x v-for渲染数据报错

分类：uni-app x

uniapp x

<template>  
    <!-- #ifdef APP -->  
    <scroll-view style="flex:1">  
    <!-- #endif -->  
        <view v-for="item in purchaseOrderList" :key="item.id">  
            <view>{{ item.trade_no }}</view>  
        </view>  
    <!-- #ifdef APP -->  
    </scroll-view>  
    <!-- #endif -->  
</template>

getApi('/v1/purchase_orders.json', {}).then(res => {  
                    console.info(res)  
                    if (res instanceof UTSJSONObject) {  
                        this.purchaseOrderList = res['data'] as Array<PurchaseOrderType>  
                        console.info(this.purchaseOrderList)  
                    }  
                })

‌error: java.lang.ClassCastException: io.dcloud.uniapp.vue.UTSReactiveJSONObject cannot be cast to uni.UNI6877788.PurchaseOrderType‌  
10:01:04.313 at pages/purchase/list.uvue:5:2  
10:01:04.314 3  |   <scroll-view style="flex:1">  
10:01:04.314 4  |    
10:01:04.314 5  |    <view v-for="item in purchaseOrderList" :key="item.id">  
10:01:04.314    |    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  
10:01:04.314 6  |     <view>{{ item.trade_no }}</view>  
10:01:04.314 7  |    </view>

2024-06-12 10:03 负责人:无分享

5 个回复

DCloud_heavensoft

不是v-for的问题。
我感觉你的purchaseOrderList 并没有变成有效类型，你可以打印purchaseOrderList[0].id 看看。
理论上应该是res那里直接用泛型转type，as应该是不行的

8***@qq.com (作者)

getApi('/v1/purchase_orders.json', {}).then(res => {  
                    console.info(res)  
                    if (res instanceof UTSJSONObject) {  
                        this.purchaseOrderList = res['data'] as PurchaseOrderType[]  
                        console.info(this.purchaseOrderList)  
                        console.info(this.purchaseOrderList[0].id)  
                    }  
                })

打印结果

[⁠UTSJSONObject⁠]‍ {total: 4, code: 0, data: [ ⁠...⁠ ], message: ""} at pages/purchase/list.uvue:40  
08:36:30.657 ‍[Array]‍ [ {status_zh: "待办", inbound_at: "2024年05月27日", purchase_order_items: [ ⁠...⁠ ], trade_no: "PO20240527103106963", created_at: "2024年05月27日", ⁠...⁠}, {status_zh: "待办", inbound_at: "2024年05月09日", purchase_order_items: [ ⁠...⁠ ], trade_no: "PO20240509173756969", created_at: "2024年05月09日", ⁠...⁠}, {status_zh: "待办", inbound_at: "2024年05月21日", purchase_order_items: [], trade_no: "PO20240504160448456", created_at: "2024年05月04日", ⁠...⁠}, {status_zh: "入库", inbound_at: "2024年05月06日", purchase_order_items: [ ⁠...⁠ ], trade_no: "PO20240504092139970", created_at: "2024年05月04日", ⁠...⁠} ] at pages/purchase/list.uvue:43  
08:36:30.670 Possible Unhandled Promise Rejection: ‍[⁠java.lang.ClassCastException⁠]‍ {cause: null, message: "io.dcloud.uniapp.vue.UTSReactiveJSONObject cannot be cast to uni.UNI6877788.PurchaseOrderType"}

具体不清楚怎么解决

沈工

this.purchaseOrderList = res['data'] as Array<PurchaseOrderType> 改 this.purchaseOrderList = res['data']

沈工

或者 :key="item.id" 改:key="index"

2024-06-20 08:48

8***@qq.com (作者)

已解决，先转字符串，再转类型

this.purchaseOrderList = JSON.parse<PurchaseOrderType[]>(JSON.stringify(res['data']))

1***@qq.com

我的怎么报类型声明的错啊？Cannot infer a type for this parameter. Please specify it explicitly.‌

数据打印出来是

要回复问题请先登录或注册

uniapp x v-for渲染数据报错

5 个回复

公告

相关问题

uniapp x v-for渲染数据报错

与内容相关的链接

5 个回复

公告

相关问题