v-for 是vue 循环 centerEventsDetail 是集合对象
<div v-for="list in centerEventsDetail" class="div-p-content">
<div class="dc_f" v-bind:title="list.eventTitle"><span style="color: black;">事件名称:</span><label class="lable" style="margin-left: 9px" v-text="list.eventTitle"></label></div>
<div class="dc_t"><div><span>是否涉密:</span><lable class="lable" v-if="list.eventInformation==0">否</lable><lable v-if="list.eventInformation==1">是</lable></div><div><span>事件上报人:</span><label class="lable" style="margin-left: 10px" v-text="list.reportResponsiblePerson"></label></div></div>
<div class="dc_t"><div><span>上报单位:</span><label class="lable" style="margin-left: 9px" v-text="list.reportOrganization"></label></div><div><span style="margin-left: 14px;"> 联系电话:</span><lable class="lable" v-text="list.eventPhone"></lable></div></div>
<div class="dc_t"><div><span>上报方式:</span><label class="lable" v-text="list.eventWay"></label></div><div><span style="margin-left: 14px;">受伤人数:</span><label class="lable" v-text="list.eventInjured"></label></div></div>
<div class="dc_t"><div><span>上报时间:</span><lable class="lable" v-text="list.reportDate" ></lable></div><div><span style="margin-left:14px;">伤亡人数:</span><label class="lable" v-text="list.eventDie"></label></div></div>
<div class="dc_co"><div><span>上报内容:</span></div></div>
<div class="reportent">{{list.reportContent}}</div>
</div>
事先定义的vue data
centerEventsDetail=new Vue({
el:'#event-detail',
data:{
centerEventsDetail:[]
}
})
发送请求 vue data 赋值
$.ajax({
url:"${ctx}/etprevsurveytask/etPrevsurveyTask/getEventDetail",
dataType:"text",
type:"post",
data:{id:eventid},
success:function(result){
var results=JSON.parse(result);
$(".div-i").remove();
if(result!=null){
//set 值
Vue.set(centerEventsDetail.centerEventsDetail,0,results);
if(startMarker!=null){
map.removeLayer(startMarker); //如果有StartMarker则清除上一个
}
map.setView([results.latitude,results.longitude], 15);
startMarker = new L.marker([results.latitude,results.longitude],{draggable:true}).addTo(map);
}else{
centerEventsDetail.centerEventsDetail=[];
$(".div-p").append("<div class='div-i'><i class='tIsNull layui-icon layui-icon-face-smile' style='font-size: 23px; color:#999999;margin: 0 auto;'>无详细信息</i></div>");
}
}
})
问题:当集合对象有值时 vue 正常渲染视图,当后面的集合对象 的少于前面的对象数据时或者为空时就会被前面的数据给覆盖
(我这里是单个对象,但是原理都是一样的)
解决办法:centerEventsDetail.centerEventsDetail=[]; 在每次请求响应成功之后,重新初始化 vue 定义的data;
注意:vue 在接受ajax 返回的值需要 json 格式的数据 否则会出现死循环 并且 无数据