在Vue项目中，我们想要实现下面的布局效果

　　

　　后端返回的数据格式如下，可以看出产品列表五张图的数据位于同一个数组中

　　

　　而我的html结构如下：

　　　　　　

　　我希望直接渲染左边一张大图，然后右边的四张小图通过v-for进行遍历，这就需要截取后四条数组数据。我首先想到的就是通过数组的slice方法直接在v-for的位置截取product_list数组的后四条数据。

　　就是下面的代码操作：

　　

　　这时，发现图片不但无法渲染，点开控制台，发现连img标签都没有渲染出来。这是为什么呢？

　　这是因为数组的slice方法并没有修改原数组，而是在原数组的基础上取出部分元素重新生成一个新数组。这就需要知道这个拷贝出来的新数组，并没有存到data数据中。而Vue视图层中绑定的数据必须要求出现在data或者computed数据中，否则就无法进行页面渲染。

　　原因找到了，那又该如何解决呢，接下来就想到了在接收到后端返回数据的时候对数据格式进行修改。修改方式和修改后的数据结构如下：

　　　　　　　　

　　html代码中渲染页面的方式也就可以换成如下的方式，也就实现了想要的页面布局效果。

　　

　　此外还可以采用计算属性的方式，对data中的floorData数据格式进行修改，未完待续。。。。。。。。

Vue项目中v-for无法渲染数据的更多相关文章

  1. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  2. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  3. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  4. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  5. 实战：vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  6. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  7. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  8. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...

  9. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

随机推荐

  1. 对于java中反编译命令的使用以及Integer包装类的查看

    Integer是基于int的包装类 我们可以用测试代码来看看Integer类是如何实现装箱和拆箱的 public class BoxAndUnbox { /** * @param args */ pu ...

  2. Python中利用for表达式创建列表

    1.for表达式语法格式及用法 for表达式利用可迭代对象创建新的列表,for表达式也称为列表推导式,具体语法格式如下: [表达式 for 循环计数器 in 可迭代对象] 例: a = [ i + i ...

  3. 2.4G芯片

    一 南京中科微: Si24R1GFSK无线收发芯片    Si24R1专为低功耗无线通信应用场合设计.工作频率为2400MHz-2525MHz,共有126个1MHz带宽的信道:典型应用:有源RFID. ...

  4. 编译安装nginx错误解决！

    编译安装执行 ./configure --prefix=/root/web/nginx --sbin-path=/root/web/nginx/sbin/nginx --conf-path=/root ...

  5. 工具，Linux - tree命令，显示程序树型结构

    sudo apt-get install tree tree --help

  6. 遍历pd.Series的index和value的方法

    以下内容来自链接:https://blog.csdn.net/qq_42648305/article/details/89634186 遍历pd.Series的index和value的方法如下,pyt ...

  7. C++结构体struct与C语⾔结构体和C++引⽤&与传值的区别

    写再最前面:摘录于柳神的笔记: (1)定义好结构体 stu 之后,使⽤这个结构体类型的时候,C语⾔需要写关键字 struct ,⽽C++⾥⾯可以省 略不写: (2)这个引⽤符号 & 要和C语⾔ ...

  8. java_3:JVM、JRE、JDK区别和联系

    首先 三者之间存在包含关系JVM + 核心类库 = JREJRE + java开发工具(javac.exe/jar.exe) = JDK 什么是JVM? 我们知道Java语言有一个独特的优点就是可以跨 ...

  9. Java--对象与类（二）

    final 实例域 可以将实例域定义为final.构建对象时必须初始化这样的域.也就是说在一个构造器执行之后,这个域被设置,并且之后无法对其修改 final 修饰符大多应用于基本(primitive) ...

  10. 02.Scala高级特性：第6节 高阶函数；第7节 隐式转换和隐式参数

    Scala高级特性 1.    课程目标 1.1.   目标一:深入理解高阶函数 1.2.   目标二:深入理解隐式转换 2.    高阶函数 2.1.   概念 Scala混合了面向对象和函数式的特 ...