一个前端报错技术细节

问题：当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>

标签：flex,getData,技术细节,res,前端,报错,null,data
来源： https://blog.csdn.net/jtpython666/article/details/116140947