Vue v-for嵌套数据渲染问题

Posted 2020-10-13 Rexcnblog

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