JasonLGY
JasonLGY
  • 发布:2025-02-04 11:35
  • 更新:2025-02-04 11:35
  • 阅读:16

v-for遍历json数组,web正确,安卓报错

分类:uni-app x

粘贴不了,提交后补充代码和web截图

可能问题是这个: this.tableData = JSON.parseArray<objType[]>(json2) as objType[];

`<template>
<view class="content">

<view>
<view class="uni-container">
<scroll-view scroll-y class="table">
<view class="table-header">
<text class="header-cell">账号</text>
<text class="header-cell">名称</text>
</view>
<list-view>
<list-item class="table-row" v-for="item in tableData" :key="item.accountnum">
<text class="item">{{ item.accountnum }}</text>
<text class="item">{{ item.name }}</text>
<view class="row-action">
<!-- <button class="btn-mini primary" @click="editItem(item)">修改</button>
<button class="btn-mini warn" @click="deleteItem(item)">删除</button> -->
</view>
</list-item>
</list-view>
</scroll-view>
<!-- <view class="pagination">
<button @click="prevPage" :disabled="pageCurrent === 1">上一页</button>
<text>{{ pageCurrent }} / {{ totalPages }}</text>
<button @click="nextPage" :disabled="pageCurrent === totalPages">下一页</button>
</view> -->
</view>
</view>
</view>
</template>

<script>
// import { InfoItem } from '@/model/info.uts'

// interface TableItem {
// accoun tnum: string;
// name: string;
// pwd: string;
// // 其他字段
// }
// type objType = {
// accountnum : string,
// name : string
// // ,
// // pwd : string
// }
// const infoList = ref<InfoItem[]>([])
type objType = {
accountnum : string
name : string
// ,
// pwd : string
}
export default {
data() {
return {
// tableData: [] as String , // 修复类型定义
// tableData: [] as objType[] , // 修复类型定义
tableData:[ { "name": "预设", "accountnum": "1111111" },{ "name": "预设2", "accountnum": "2222222" } ] as objType[] , // 修复类型定义
pageSize: 5,
pageCurrent: 1,
total: 0,
loading: false
};
},
computed: {
totalPages() {
return Math.ceil(this.total / this.pageSize);
}
},
onLoad() {
this.getData(1) ;
},
methods: {
async getData(pageCurrent:number) {
try {
console.log('-----1类型this.tableData:',typeof this.tableData);
console.log('数组判断:');
console.log(Array.isArray(this.tableData));
console.log('数组判断结束: ');
// if (this.tableData instanceof UTSArray<objType>) {
// console.log('-----111111类型this.tableData:True ');
// }
// else{
// console.log('-----222222类型this.tableData:false ');
// }
console.log('-----1this.tableData: ', this.tableData);
this.loading = true;
this.pageCurrent = pageCurrent;
// const json2 = [ {accountnum: "正确", name: "1111111"}, {accountnum: "正确", name: "2222222"} ] as objType[] ;
let json2 = '[ { "name": "正确", "accountnum": "1111111" },{ "name": "名字2", "accountnum": "2222222" } ]';
// json2 = '1';
console.log('数组判断22-1:');
console.log(Array.isArray(json2));
console.log('数组判断结束2:');
// json2 = json2.toTypedArray();
console.log('数组判断33:');
console.log(Array.isArray(json2));
console.log('数组判断结束3:');
console.log('-----2类型json2:',typeof json2);
console.log('-----2类型json2:',json2);

    try {  
    //数组:  
    // this.tableData = json2 as objType[];  
    // this.tableData = JSON.parseObject<objType[]>(JSON.stringify(json2))  as objType[];  
    this.tableData = JSON.parseArray<objType[]>(json2) as objType[];  
    // this.tableData = JSON.parseArray<objType[]>(json2);  
    console.log('数组判断结束4:');  
    // console.log(Array.isArray(this.tableDatas));  

   } catch (error) {  
    //TODO handle the exception  
    console.error('获取数据失败1:', error);  
    this.loading = false;  
   }  
    this.loading = false;  

} catch (error) {
//TODO handle the exception
console.error('获取数据失败2:', error);
this.loading = false;
}
},
prevPage() {
if (this.pageCurrent > 1) {
this.pageCurrent--;
this.getData(this.pageCurrent);
}
},
nextPage() {
if (this.pageCurrent < this.totalPages) {
this.pageCurrent++;
this.getData(this.pageCurrent);
}
}
// ,
// editItem(item) {
// console.log('编辑:', item);
// },
// deleteItem(item) {
// console.log('删除:', item);
// }
// ,
// paste_input() {
// uni.getClipboardData({
// success: (res) => {
// this.input_value = res.data;
// }
// });
// }
}
};
</script>

<style>
.content {
display: flex;
flex-direction: column;
padding: 20rpx;
}

.table {
height: 600rpx;
border: 1rpx solid #eee;
}

.table-header, .table-row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx;
border-bottom: 1rpx solid #eee;
}

.header-cell, .item {
flex: 1;
text-align: center;
}

.row-action {
display: flex;
flex-direction: row;
margin-right: 10rpx; / 替换 gap /
}

.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
}

.button {
margin-top: 20rpx;
text-align: center;
}
</style>`

2025-02-04 11:35 负责人:无 分享
已邀请:

要回复问题请先登录注册