解决Vue数据更新数据不渲染问题
Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push()pop()shift()unshift()splice()sort()reverse()vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)filter(), concat(), slice() ...
·
- 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循环渲染出数据,再也不会出现刷新几次没有数据的问题了
更多推荐
已为社区贡献4条内容
所有评论(0)