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. 如何在react里嵌入iframe?

    无法访问iframe地址 index.js文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from ...

  2. 基类VS接口

    该篇引用 CLR via C# 中的13.11节. 应该设计基类还是接口,这个问题不能一概而论,下面提供一些指导性原则: 1. IS_A关系(指属于,例如汽车属于交通工具) vs CAN_DO关系(指 ...

  3. Pytest框架介绍

    Pytest框架介绍.安装 pytest是python测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,功能更强大 pytest特征 1:断言提示信 ...

  4. python 之发送邮件服务[原著] 海瑞博客

    Python 发送邮件 使用默认的django的发送邮件,只适用于单邮箱. 作者:海瑞博客 http://www.hairuinet.com/ setting中配置 # send e-mail EMA ...

  5. (原、整)Unreal源码 CoreUbject- Uobject

    (原.整) Unreal源码 CoreUbject- Uobject 类别                    [随笔分类]Unreal源码搬山 @author:白袍小道 随缘那啥 这里还是属于UE ...

  6. 2 28TOP100

    import json import requests from requests.exceptions import RequestException import re import time d ...

  7. 系统编程--标准IO

    1.流和FILE对象 对于国际字符集,一个字符可以由一个以上的字节来表示.标准I/O文件流可以用来操作单字节和多字节(宽,wide)字符集.一个流的方向(orientation)决定了字符是以单字节还 ...

  8. python中的re模块,常用函数介绍

    参考: http://www.cnblogs.com/tina-python/p/5508402.htm ======== 1,预定义字符集,可以写在字符集[....]中 \d  数字: \D 非数字 ...

  9. jQuery基础知识点(下)

    在实际开发中,jQuery的实践性非常强大.上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展. 1.表单值的操作 //获取文本框的值 //txt.value var val = $( ...

  10. (总结)Nginx 502 Bad Gateway错误触发条件与解决方法

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.以下是从Google搜集整理的一些Nginx 502错误的排查方法,供参考: Nginx 502 ...