在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. leetcode 0216

    目录 ✅ 893. 特殊等价字符串组 描述 解答 cpp py ✅ 811. 子域名访问计数 描述 解答 cpp py ✅ 509. 斐波那契数 描述 解答 cpp py ✅ 521. 最长特殊序列 ...

  2. 蓝牙/zigbee/nrr24xx

    目前使用的短距离无线通信技术及标准主要有Bluetooth.WIFI.ZigBee.UWB.NRF24XX系列产品等.Nordic公司生产的单片集成射频无线收发器NRF24XX系列芯片具有低功耗.支持 ...

  3. SQL Server 消息队列，处理程序错误

    SQL Server 消息队列,处理程序错误存储过程书写错误,会导致消息处理队列停用,此时只需将错误修正,再将队列处理状态启用即可. ALTER QUEUE OrdBomPurQty_ReivceQu ...

  4. Js判断值是否是NaN

    方法一:window.isNaN() 注意: window.isNaN 只对数值有效,如果传入其他值,会被先转成数值.比如,传入字符串的时候,字符串会被先转成NaN,所以最后返回true,这一点要特别 ...

  5. 使用win32com操作woord的方法记录

    CSDN博客平台中有众多的 win32com 库操作word 的说明,对于通用的内容将一笔带过,主要介绍目前看来独一无二的内容. import win32com from win32com.clien ...

  6. Maven打包项目失败；报错：Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-war) on project Hello: Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/we

    报错信息: E:\MIKEY\mikey\HTML5\TestMaven_01>mvn package [INFO] Scanning for projects... [INFO] [INFO] ...

  7. git add 添加错文件 撤销

    git status 先看一下add 中的文件 git reset HEAD 如果后面什么都不跟的话 就是上一次add 里面的全部撤销了 git reset HEAD XXX/XXX/XXX.java ...

  8. Python数据类型-3 布尔类型

    布尔类型 对于错.0和1.正与反,都是传统意义上的布尔类型. 但在Python语言中,布尔类型只有两个值,True与False.请注意,是英文单词的对与错,并且首字母要大写,不能其它花式变型. 布尔值 ...

  9. windows下svn post-commit的实现

    前言: 好的!在结束了上一博客教程的Subversion安装之后.我们开始了下一项工作,windows版本下 svn post-commit的实现.说实话,这方面的知识网上的知识并不是很多~~~~~~ ...

  10. json 常用的方法

    JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 . -------  菜鸟网 1.  JSON.parse() :用于将一个 JSON 字符串转换为 JavaScrip ...