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. Web安全2--XSS&CSRF

    1.XSS(跨站脚本攻击) 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS ...

  2. Windows Server 2012 新特性:IPAM的配置

    Windows Server 2012 中的 IPAM 是一个新增的内置框架,用于发现.监视.审核和管理企业网络上使用的 IP 地址空间.IPAM 可以对运行动态主机配置协议 (DHCP) 和域名服务 ...

  3. Hyper-V在线调整虚拟硬盘大小

    从Windows Server 2012 R2 开始,可以在线调整虚拟硬盘的大小了,这意味着当虚拟硬盘不够用时,我们在虚拟机运行的情况下直接扩展虚拟硬盘容量了.有人说这个有什么用?当然,实验室情况下, ...

  4. 软引用SoftReference

    本文介绍对象的强.软.弱和虚引用的概念.应用及其在UML中的表示. 1.对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有 ...

  5. Android学习记录(4)—在java中学习多线程下载的基本原理和基本用法①

    多线程下载在我们生活中非常常见,比如迅雷就是我们常用的多线程的下载工具,当然还有断点续传,断点续传我们在下一节来讲,android手机端下载文件时也可以用多线程下载,我们这里是在java中写一个测试, ...

  6. python学习笔记二:流程控制

    一.if else: #!/usr/bin/python x = int(raw_input('please input:')) if x >= 90: if x >= 95: print ...

  7. DDT驱动

    下载ddt并安装 Pip install ddt 或者官网下载安装 http://ddt.readthedocs.io/en/latest/ https://github.com/txels/ddt ...

  8. 孤荷凌寒自学python第四天 安装python的其它IDE环境

    孤荷凌寒自学python第四天 安装python的其它IDE环境 (完整学习过程屏幕记录视频地址在文末) 因为是完全的新手,对python环境搭建完全一无所知,因此,可真是大费周章才配置了其它多个Id ...

  9. diskimage-builder

    Supported Distributions Distributions which are supported as a build host: Centos 6, 7 Debian 8 (“je ...

  10. [转] mysql分区性能初探

    本文转自:http://www.cnblogs.com/acpp/archive/2010/08/09/1795464.html 一,      分区概念  分区允许根据指定的规则,跨文件系统分配单个 ...