vue中报Error in render function: "TypeError: Cannot read property

当vue项目中报：Error in render function: “TypeError: Cannot read property ‘value of null’错的时候；

你又定位不到问题的所在位置，这时候你就要检查下你的项目中template模板中是否用到了没有定义的数据。
这时候你可能发现你都定义了；比方你的data中是这样的：

data(){
            return{
                detailData:"",//详情接口数据
                partsList:[],
                commidityId:'',
                classifyID:'',
                pClassifyTitle:'',
                ClassifyTitle:'',
                imageUrl:'',
                title:'',
                navIndex:1,
                packageIndex:0,
                commidityDetail:'',
                saleprice:'',
                package:''
            }
        },

你能发现你定义了commidityDetail这个变量；但是你的页面的数据使用是这样的：

<div v-show='navIndex == 1'>
    <span v-for='item in commidityDetail.images'><img :src='item.value'></span>
</div>
<div v-show='navIndex == 2'>
    <span v-for='item in commidityDetail.shop' ><img :src='item.value'></span>
</div>

而你在项目中通过接口请求回来数据进行赋值的时候是这样的：

this.partsList = response1.data.parts;
//默认选中第一个套餐
this.commidityDetail = this.partsList[0];
this.saleprice = this.partsList[0].detail.saleprice;
this.package = this.partsList[0].detail.id`这里写代码片`;

你也对其进行了赋值；你就会想明明赋值了咋回报错呢。这时你就要检查你赋值后的this.commidityDetail是否真的有commidityDetail。images或者commidityDetail.shop；经过检查commidityDetail.shop == null；这时你在template中直接使用commidityDetail.shop就会出错了，因为你的data中并没有声明shop；
解决办法：

<div v-show='navIndex == 1' v-if='commidityDetail.images[0]'>
    <span v-for='item in commidityDetail.images'>
        <img :src='item.value'>
    </span>
</div>
<div v-show='navIndex == 2' v-if='commidityDetail.shop[0]'>
    <span v-for='item in commidityDetail.shop' >
        <img :src='item.value'>
    </span>
</div>

像上边的模板，在你使用commidityDetail.shop加载dom地方，使用v-if进行下判断；如果commidityDetail.shop 不存在，就不加载dom；这样就不会出现错误了！