问题:当data为null时,报错data不能为null
原因:在网页还没有请求数据,页面v-for就执行了,所以此时的data还没有赋值数组。
解决办法:在html中加入v-if=“data”,当data!=null时才渲染页面。
<template>
<view v-if="data!=null" class="">
<uni-list>
<uni-list-item v-for="(item,index) in data.data" :key="index" title="">
<image
slot="header"
style="width: 240rpx;height:240rpx;"
:src="'http://101.96.128.94:9999/'+item.pic"
mode=""></image>
<view class="content" slot="body">
<text>{{item.title}}</text>
<text>${{item.price}}</text>
</view>
</uni-list-item>
</uni-list>
</view>
</template>
<script>
export default {
name: '',
mounted() {
this.getData()
},
data () {
return {
data:null
}
},
methods:{
getData(){
uni.request({
url:'http://101.96.128.94:9999/data/product/list.php',
method:'GET',
data:{pno:1},
success: (res) => {
console.log(res)
this.data=res.data
}
})
}
}
}
</script>
<style scoped>
.content{
display: flex;
flex-direction: column;
}
</style>