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", []);
}
});
}
Vue v-for嵌套数据渲染问题的更多相关文章
- vue学习笔记:数据渲染操作
{{xxx}} 基本的插值表达式 插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置 这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以 ...
- vue从后台拿数据渲染页面图片
<div class="list-content"> <div v-for="goods in goodsList" class=" ...
- 解决vue数据渲染过程中的闪动问题
关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...
- vue 在发送axios请求时数据渲染问题
这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...
- vue数据渲染、条件判断及列表循环
1.数据渲染 {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- vue和jQuery嵌套实现异步ajax通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Vue实例对象的数据选项(火柴)
前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...
- vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02
一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...
随机推荐
- 批量修改Linux文件夹下所有文件大小写
小写转大写: [zengs@SYS SOS]$ for cpplive in *; do mv $cpplive `echo $cpplive|tr [a-z] [A-Z]`; done 大写转小写: ...
- 《数据结构》C++代码 邻接表与邻接矩阵
上一篇“BFS与DFS”写完,突然意识到这个可能偏离了“数据结构”的主题,所以回来介绍一下图的存储:邻接表和邻接矩阵. 存图有两种方式,邻接矩阵严格说就是一个bool型的二维数组,map[i][j]表 ...
- linux查看80端口占用情况
netstat -anltp|grep 80
- OZ customize windows iamge
1.之前通过修改auto文件和windows.py文件可实现自动安装OS,但是disk bus只能以IDE模式启动,进入系统自动下载运行bat文件,安装cloudbase-init和qga,及清理日志 ...
- Ubuntu下禁用笔记本自带键盘
想要禁用笔记本自带键盘(Ubuntu)只要2条命令. 1. 打开终端,输入: xinput list ⎡ Virtual core pointer id=2 [master pointer (3)] ...
- css 外边距,内边距的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux安装软件的几种方法
一.rpm包安装方式步骤: 1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录: 2.打开一个终端,su -成root用户: 3.cd soft.version.rpm所在 ...
- table & colgroup
table & colgroup // <caption>版本信息</caption> table = ` <table class="versions ...
- 【bzoj5056】OI游戏 最短路+矩阵树定理
题目描述 给出一张无向图,求满足 0号点到所有点的路径长等于原图中它们之间最短路 的生成树的个数. 输入 第一行一个整数N,代表原图结点. 接下来N行,每行N个字符,描绘了一个邻接矩阵.邻接矩阵中, ...
- LeetCode -- Valid Parenthese
Question: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine i ...