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 ...
随机推荐
- windows下进程间通信(转)
摘 要 随着人们对应用程序的要求越来越高,单进程应用在许多场合已不能满足人们的要求.编写多进程/多线程程序成为现代程序设计的一个重要特点,在多进程程序设计中,进程间的通信是不可避免的.Microsof ...
- 剑指Offer - 九度1350 - 二叉树的深度
剑指Offer - 九度1350 - 二叉树的深度2013-11-23 00:54 题目描述: 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的 ...
- Vbs 测试程序二
这是一段原载于百度百科上的代码,Chaobs转载 原帖已删,就是怕有人用这个恶意程序. 慎用! dim folder,fso,foldername,f,d,dc set fso=createobjec ...
- CodeIgniter学习笔记三:扩展CI的控制器、模型
一.扩展CI中的控制器 有时需要对CI中的控制器作统一操作,如进行登录和权限验证,这时就可以通过扩展CI控制器来实现. 扩展CI控制器只需要在application/core文件夹中建一个继承自CI_ ...
- css 之 border-radius属性
css中给盒子设置圆角可以通过 border-radius 属性来实现(具体原理就不深入探讨了); 在开发过程中都会遇到浏览器兼容问题,这问题其实也不难解决,无非就是加上私有前缀,在这里先忽略掉. ...
- 孤荷凌寒自学python第二十二天python类的继承
孤荷凌寒自学python第二十二天python类的继承 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) python中定义的类可以继承自其它类,所谓继承的概念,我的理解 是,就是一个类B继承自 ...
- ctags+cscope替换sourceinsight
背景 windows环境开发+linux交叉编译的开发模式,代码阅读和编写都用的source-insight. 除了检索,跳转,工程构建等方面,sourceinsight自带了一些宏语言,可以轻松实现 ...
- 一个符号冲突导致的core分析
问题描述: 修改跟踪程序(Trace)支持IPV6时,发现程序启动后正常,但是客户端一旦下发查询条件进行跟踪,Trace程序就直接coredump! (gdb) bt # 0x00007f7dab9e ...
- Spring 笔记(一)概念梳理
概念 预备知识 1. POJO POJO是Plain Old Java Object的缩写,是软件开发大师Martin Fowler提出的一个概念,指的是一个普通Java类.也就说,你随便编写一个Ja ...
- [译]在Linux中清空或删除大文件内容的5种方法
原文来源: https://www.tecmint.com/empty-delete-file-content-linux/ 有时,在处理Linux终端中的文件时,您可能希望清除文件的内容,而无需使用 ...