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

Vue v-for嵌套数据渲染问题的更多相关文章

  1. vue学习笔记:数据渲染操作

    {{xxx}} 基本的插值表达式 插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置 这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以 ...

  2. vue从后台拿数据渲染页面图片

    <div class="list-content"> <div v-for="goods in goodsList" class=" ...

  3. 解决vue数据渲染过程中的闪动问题

    关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...

  4. vue 在发送axios请求时数据渲染问题

    这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...

  5. vue数据渲染、条件判断及列表循环

    1.数据渲染  {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...

  6. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  7. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. Vue实例对象的数据选项(火柴)

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  9. vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02

    一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...

随机推荐

  1. 2.route路由配置

    转自 http://www.cnblogs.com/peida/archive/2013/03/05/2943698.html Linux系统的route命令用于显示和操作IP路由表(show / m ...

  2. dealloc时取weakself引起崩溃

    今天无意这中遇到一个奇怪的崩溃,先上引起崩溃的代码: - (void)dealloc { __weak __typeof(self)weak_self = self; NSLog(@"%@& ...

  3. 3dMax,Maya与FBX

    3DMax下载地址(包含安装教程与注册方法):http://www.3d66.com/popsoft_1.html 3DMax已经自带导出为fbx格式的功能,所以无需安装fbx插件 Maya下载地址( ...

  4. win10系统安装之GHOST还原(转+编辑)

    注意*:在以下操作中,你可能需要分区你的原来系统盘,如果是重装的话.现在我们使用SSD固态做系统盘盘,这个分区的话,点选mbr重新引导,以及对齐复选框. 如果前面过程都没问题,在安装过程中出现    ...

  5. 源码分析(一) HashMap 源码分析|JDK8

    HashMap是一个普遍应用于各大JAVA平台的最最最常用的数据结构.<K,V>的存储形式使HashMap备受广大java程序员的喜欢.JDK8中HashMap发生了很大的变化,例如:之前 ...

  6. Oz 创建Windows2008R2镜像

    此tdl和auto文件只可定义windows disk bus以ide模式启动,不支持virtio. <template> <name>Windows-gushiren< ...

  7. Vue-cli 本地开发请求https 接口 DEPTH_ZERO_SELF_SIGNED_CERT

    环境:npm run dev 本地开发连接后台的开发环境的接口. 贴上proxyTable 的转发(代理?反向?这个具体叫什么不明白...) proxyTable: { "/api" ...

  8. Java系列学习说明

    最近要回顾以前的开发知识了,每天一个案例,争取早日成为一名合格的程序猿,现在就是猴娃子级别的.

  9. NYOJ36 水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...

  10. PHP生成随机数函数rand(min,max)

    rand(min,max):生成min到max 的随机数,注意:包括边界rand() 返回 0 到 RAND_MAX 之间的伪随机整数.例如,想要 5 到 15(包括 5 和 15)之间的随机数,用 ...