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. 线性表(List)

    1.什么是线性表(List)? 零个或多个数据元素的有限序列. (1)元素之间是有序的. (2)线性表强调是有限的. 2.线性表有哪些操作? (1)线性表的创建和初始化,InitList (2)判空, ...

  2. 【Power of Two】cpp

    题目: Given an integer, write a function to determine if it is a power of two. 代码: class Solution { pu ...

  3. [网站公告]1月10日1:00-7:00阿里云RDS维护会造成30秒闪断

    大家好! 阿里云将于1月10号1:00-7:00(今天夜里)对杭州机房部分RDS实例所在的物理主机做维护操作,维护期间部分RDS实例会有1-2次闪断,每次闪断时间在30秒以内. 我们使用的RDS实例将 ...

  4. 基于mysqldump备份集来恢复某个误操作的表(drop,truncate)

      Preface       How to rescue a dropped or truncated table online?Dropping or truncating is ddl oper ...

  5. Nova 如何统计 OpenStack 资源

    1.云计算的本质在于将硬件资源软件化,以达到快速按需交付的效果,最基本的计算.存储和网络基础元素并没有因此改变.就计算而言,CPU.RAM 和 DISK等依旧是必不可少的核心资源. 从源代码和数据库相 ...

  6. 【志银】Ubuntu Apache2配置SSL证书

    1.准备工作 证书文件:zain.crt.zain.key /etc/apache2/文件夹下新建ssl 文件夹,将证书文件放入/etc/apache2/ssl 2.配置SSL证书 打开/etc/ap ...

  7. 一个画ROC曲线的封装包

    Draw_ROC_Curves This is a python file which is used for drawing ROC curves -f : assign file name -t ...

  8. POJ 2983-Is the Information Reliable

    Description The galaxy war between the Empire Draco and the Commonwealth of Zibu broke out 3 years a ...

  9. MPS添加管理设备实例NS的过程

    MPS添加管理设备实例NS的过程 MPS添加实例NS设备节点: > show snmp community Done > > add snmp community public al ...

  10. deeplearning4j——卷积神经网络对验证码进行识别

    一.前言 计算机视觉长久以来没有大的突破,卷积神经网络的出现,给这一领域带来了突破,本篇博客,将通过具体的实例来看看卷积神经网络在图像识别上的应用. 导读 1.问题描述 2.解决问题的思路 3.用DL ...