解决Vue数据更新数据不渲染问题

版权声明：未经授权，禁止转发，转发请注明出处 https://blog.csdn.net/loveer0/article/details/82221886

• Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： 
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
  • vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
  • filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
• Vue 不能检测以下变动的数组： 
  • ① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
  • ② 当你修改数组的长度时，例如： vm.items.length = newLength

function getFoolTypeAllData(){
	$.ajax({
		url:projectName+"/fool/getFoolType",
		type:"get",
		success:function(data){
			$.each(data,function(a,b){
				  // this.foolType[a] ={id:b.id,type:b.type} //这样直接修改不能被vue监听到
			          // Vue.set(this.foolType,a,{id:b.id,type:b.type}); //这样就能被vue监控到，更新视图  
				 Vue.set(this.foolType,a,{id:b.id,type:b.type});
			})
		},error:function(){
			layer.msg("服务器异常！获取菜品类型失败", {icon: 5});
		}
	})
	
}

通过后台接口获取数据，封装到Vue的定义的变量foolType[]中，页面通过v-for循环渲染出数据，再也不会出现刷新几次没有数据的问题了