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",  []);
            }
        });
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM