今天服务端返回一个奇葩数据，类似下面这样：
const arr = [
{
'备注': 'a111',
'当前状态': 'a222',
'数据来源单位': 'a333'
},
{
'备注': 'b111',
'当前状态': 'b222',
'数据来源单位': 'b333'
},
{
'备注': 'c111',
'当前状态': 'c222',
'数据来源单位': 'c333'
}
]但是我们使用vue的v-for指令时没办法循环，所以需要处理一下上面的数据，下面我写一下方法
created() {
const arr = [
{
'备注': 'a111',
'当前状态': 'a222',
'数据来源单位': 'a333'
},
{
'备注': 'b111',
'当前状态': 'b222',
'数据来源单位': 'b333'
},
{
'备注': 'c111',
'当前状态': 'c222',
'数据来源单位': 'c333'
}
]
this.arr = this.getNewArr(arr)
},
methods: {
// 这里是child数组
getChild(obj) {
const resultArr = []
Object.keys(obj).forEach((key, index, object) => {
const tempObj = {}
tempObj.name = key
tempObj.value = obj[key]
resultArr.push(tempObj)
})
return resultArr
},
getNewArr(arr) {
const tempArr = []
for (const i in arr) {
const obj = arr[i]
tempArr.push({
child: this.getChild(obj)
})
}
return tempArr
}
}然后我们在模板里面这样去循环：
<card v-for="(item,index) in arr" :key="index">
<van-cell
v-for="(child,cIndex) in item.child"
:key="cIndex"
:title="child.name"
:value="child.value"
/>
</card>
