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. Win10安装bash慢的解决方案

    电脑的Win10系统经过最近一年大量软件的装装删删,感觉已经有问题了,而且也存在大量无法清理的垃圾,占用着宝贵的SSD空间... 重新做系统的想法已经有一段时间了,正好赶上Win10的大更新 Crea ...

  2. 剑指Offer - 九度1512 - 用两个栈实现队列

    剑指Offer - 九度1512 - 用两个栈实现队列2013-11-29 21:23 题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作.队列中的元素为int类型. 输入: 每个输入 ...

  3. 《Cracking the Coding Interview》——第2章:链表——题目4

    2014-03-18 02:27 题目:将一个单链表按照一个值X分为两部分,小于X的部分放在大于等于X的部分之前. 解法:按照值和X的大小,分链表为两条链表,然后连起来成一条. 代码: // 2.4 ...

  4. Windows 2003 IIS服务器配置环境(放.net开发的网站)

    配置IIS 安装.Net Framework3.5 安装SQL数据库 IIS的配置与安装步骤: 开始->管理工具->管理您的服务器->添加角色->(配置您的服务器向导)下一步- ...

  5. 【Gradient Boosted Decision Tree】林轩田机器学习技术

    GBDT之前实习的时候就听说应用很广,现在终于有机会系统的了解一下. 首先对比上节课讲的Random Forest模型,引出AdaBoost-DTree(D) AdaBoost-DTree可以类比Ad ...

  6. python判断mongodb--find(),find_one()返回是否为空

    conn = MongoClient('127.0.0.1', 27017)db = conn.diffcollection = db['test1']result = collection.find ...

  7. Java基础-8构造方法

    一).构造方法: 在之前我们提到对象的概念以及对象的实例化等,在这里简单回顾下: Man man = new Man(); 语句创建一个对象,new可以理解成创建一个对象的关键字,通过new关键字为对 ...

  8. [译]15-spring 自动装配

    前面的章节我们已经学习了如何使用bean元素在xml配置文件中声明一个bean.也学习了如何使用bean的子元素contructor-arg 和property进行bean的依赖项的注入. 之前bea ...

  9. shell之小知识点

    last:显示/var/log/wtmp文件,显示用户登录历史及重启历史     -n #:仅显示最近几次的相关信息 lastb:/var/log/btmp文件,显示用户错误的登录尝试     -n ...

  10. c#中onclick事件请求的两种区别

    在C#中如果是asp控件的button有两个click的调用,一个是OnClick,一个是OnClientClick.那么这两者有什么区别呢,下面就来说说区别. <asp:Button ID=& ...