Vue v-for嵌套数据渲染问题
Vue v-for嵌套数据渲染问题
问题描述:
由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用
问题原因:
vue在处理多层的渲染的时候,不能直接用等号赋值出来的数据,只能是用官方提供的$set方法
解决办法:
在用异步请求数据的时候,返回的时候直接用$set方法给属性赋值。
function ProductTypeSubList(Id) { var url = globalUtils.globalHomeUrl + urlConstants.Product.GetProTypeList + "?CustomerID=0&Id=" + Id; Vue.http.get(url) .then((response) => { if (response.data.Code == 0) { var ProListUrl = globalUtils.globalHomeUrl + urlConstants.Product.GetProList + "?CustomerID=0&ProTypeId="; var ProductTypeSubList = response.data.Data.L_ProTypeList; Assort.$set(Assort, "ProductTypeSubList", ProductTypeSubList); ProductTypeSubList.forEach(function(element) { var ProList = new Array(); Vue.http.get(ProListUrl + element.Id) .then((response) => { if (response.data.Code == 0) { Assort.$set(element, "ProList", response.data.Data.L_ProList); } }); }, this); } else { Assort.$set(Assort, "ProductTypeSubList", []); } }); }