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 ...
随机推荐
- Win10安装bash慢的解决方案
电脑的Win10系统经过最近一年大量软件的装装删删,感觉已经有问题了,而且也存在大量无法清理的垃圾,占用着宝贵的SSD空间... 重新做系统的想法已经有一段时间了,正好赶上Win10的大更新 Crea ...
- Jmeter微信小程序接口测试
最近公司新项目组开发一款微信小程序电商平台,为了更好保证产品质量,因此提出了需要进行接口测试. 从接口本身来讲,对其测试与其他项目应该是一样的.所以不难理解,我们要对小程序的接口测试需要准备的 材料有 ...
- Java进制间的转换
最近学习了Java间的进制转换,记录下自己的学习心得,希望可以帮到前来查看的朋友们,如果有不懂的地方可以在下方评论留言,我们一起学习进步,只有自己足够强大才能弥补不足,多学习, 任意进制到十进制的转换 ...
- 社区版pycharm安装Django框架
1.cmd下执行:pip3 install django 2.cmd下执行:django-admin startproject Demo (Demo为项目名称,可以更改你取的项目名称) 3.cmd下执 ...
- python 学习分享-实战篇高级的ftp
#server代码 import socketserver,os,hashlib Base_paht = os.path.dirname(os.path.dirname(os.path.abspath ...
- 聊聊、Mybatis XML
引入相应的依赖包 <dependency><groupId>org.mybatis</groupId><artifactId>mybatis-sprin ...
- cmd中神奇的命令 prompt $g
万万没想到还可以这么玩 将java文件编译为class以后可以这样直接运行 java A<1.txt 就相当于把1.txt中的内容以模拟输入的方式输入到java中 java A>1.txt ...
- fisheye在centos上的安装
目录 描述 部署过程 安装及配置 破解 添加存贮库 在jira上配置 描述 Fisheye 一个源代码库深度查看软件,它可以挖掘源代码库中的有用信息,呈现在Web浏览器界面上. Crucible是一个 ...
- 设计模式之单例模式与工厂模式的Python实现(二)
2. 工厂模式 工厂模式是创建型设计模式的一种.核心的思想是,通过传递给类或函数某种产品的信息来创建产品并返回.当我们想得到产品a对象,只需把产品a的名字传递给工厂函数就能得到产品a对象.而核心思想的 ...
- P1023 税收与补贴问题
题目背景 每样商品的价格越低,其销量就会相应增大.现已知某种商品的成本及其在若干价位上的销量(产品不会低于成本销售),并假设相邻价位间销量的变化是线性的且在价格高于给定的最高价位后,销量以某固定数值递 ...