vue中报Error in render function: "TypeError: Cannot read property ‘ ’ of null

vue项目中报：Error in render function: “TypeError: Cannot read property ‘id’ of null ； 

vue数据：定义了一个数组，存放后台传过来的对象集合，这个没问题

var shopModal = new Vue({
	  el : '#shopModal',
	  data : { shopList : [] },
  }

定义了shopList 这个变量；页面的数据使用是这样的：  也没问题

<!-- 绑定店铺列表的modal --> 
<div class="modal fade bs-example-modal-sm"  id="shopModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog ">
		<div class="modal-content">
		 <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myShopModalLabel"></h4>
         </div>
			<div class="modal-body">
				<table id="dynamic-table"
					class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th class="center" style="width: 50px;">序号</th>
							<th class='center'>店铺名称</th>
							<th class='center'>店铺老板/联系方式</th>
							<th class='center'>店铺地址</th>
							<th class='center'>店铺详情介绍</th>
							<th class='center'>创建时间</th>
							<th class='center'>店铺类别</th>
							<th class='center'>操作</th>
						</tr>
					</thead>
					<tbody id="foolList">
						<!-- 开始循环 -->
						
							<tr v-cloak v-for="shop in shopList">
								<td class='center'>{{shop.id}}</td>
								<td class="center">{{shop.shopTitle }}</td>
								<td class="center">{{shop.shopBossName }} / {{shop.shopPhone }}</td>
								<td class="center">{{shop.shopAddress }}</td>
								<td class="center">{{shop.shopMsg == null ? "无" : shop.shopMsg}}</td>
								<td class="center">{{ dateFormat(shop.created)}}</td>
								<td class="center">
								<!-- 1.饭店，2. 蔬菜配送，3.水果4.调料干杂，5. 水产，6.海鲜，7.其它 默认0 --> 
									<span v-if="shop.shopType ==1" >饭店</span>
									<span v-if="shop.shopType ==2">蔬菜配送</span>
									<span v-if="shop.shopType ==3">水果</span> 
									<span v-if="shop.shopType ==4">调料干杂</span> 
									<span v-if="shop.shopType ==5">水产</span> 
									<span v-if="shop.shopType ==6">海鲜</span> 
									<span v-if="shop.shopType ==7">其他</span> 
								</td>
								<td>
								<!-- 删除此店铺绑定的店铺 -->
								<a class="red" id="cancelShopBtn"><i title="取消绑定" class="ace-icon fa fa-trash-o bigger-130" @click="deleteShopByShopId(shop.id)"></i></a>
								</td>
							</tr>

					</tbody>
				</table>
				</div>
		 	 <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
               <button type="button" class="btn btn-primary"  id="addSendShopBtn" @click="getBindShopListByShopId()"></button>
           	 </div>
		</div>
	</div>
</div>	

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

getBindShopByShopId:function(id){
			var index = layer.load(2, {time : 10 * 1000	});
			 bindShopId = id;//绑定店铺id
			$.ajax({
				url:projectName+"/foolshop/getBindShopByShopId?id="+id,
				type:"get",
				success:function(result){
					layer.close(index);
				        shopModal.shopList = result.list;
				},error:function(){
					layer.close(index);
					layer.msg("服务器异常！！！获取店铺数据失败",{icon:6});
				}	
			})
		}

对其进行了赋值；但是明明赋值了咋会报错呢。这时就要检查赋值后的shopList 是否真的有shopList 。经过检查shopList  == null；这时你在template中直接使用shopList 来循环就会出错了，因为你的data中shopList 为空那么里面的属性也就为空了； 
解决办法：在id为foolList 上添加v-if判断shopList是否为空，我试过v-if='shopList' 但是依然报错，最后改成v-if='shopList[0]'解决问题,可能是数组的原因吧 。未查证！！！  

<!-- 绑定店铺列表的modal --> 
<div class="modal fade bs-example-modal-sm"  id="shopModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog ">
		<div class="modal-content">
		 <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myShopModalLabel"></h4>
         </div>
			<div class="modal-body">
				<table id="dynamic-table"
					class="table table-striped table-bordered table-hover">
					
					<tbody id="foolList" v-if="shopList[0]"><!--在循环之前就判断变量是否有值，这样就可以避免没有数据还进行循环-->
						<!-- 开始循环 -->
						
							<tr v-cloak v-for="shop in shopList">
								<td class='center'>{{shop.id}}</td>
								<td class="center">{{shop.shopTitle }}</td>
								<td class="center">{{shop.shopBossName }} / {{shop.shopPhone }}</td>
								<td class="center">{{shop.shopAddress }}</td>
								<td class="center">{{shop.shopMsg == null ? "无" : shop.shopMsg}}</td>
								<td class="center">{{ dateFormat(shop.created)}}</td>        
                                                        </tr>
					</tbody>
				</table>
				</div>
		 	 <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                               <button type="button" class="btn btn-primary"  id="addSendShopBtn" @click="getBindShopListByShopId()"></button>
           	 </div>
		</div>
	</div>
</div>	

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

v-if等相关类容官方文档看吧：https://cn.vuejs.org/v2/guide/conditional.html#v-else-if

这是今天遇到的问题及解决办法 ，记录一下，方便下次查找。 但是只是解决了问题，有时间得多钻研钻研前端框架。