在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. dp求解各种子串子序列

    目录 概念 最长上升子序列 最长连续子串 最长公共子序列 最长公共上升子序列 注:dp可能并不是求解该这些问题的最优算法,这里只是做一个dp 算法的简介. 概念 定义:假设现有一个 string = ...

  2. [原]Java工程打包注意事项

    注意事项(持续增加...): 如果Java工程中用到了注解,在用eclipse打jar包时需要注意一下,勾上“Add directory entries”,否则注解的类会注册不上

  3. i.MX RT600之DSP调试环境搭建篇

    恩智浦的i.MX RT600是跨界处理器产品,同样也是i.MX RTxxx系列的开山之作.不同于i.MX RT1xxx系列单片机,i.MX RT600 采用了双核架构,将新一代Cortex-M33内核 ...

  4. 【网寻】mui - 点击事件

    //本来是需要这样的,结果点击无响应 $(".mui-control-item").on("click",function(event){ alert(1) } ...

  5. redis 基础 Redis 数据类型

    String(字符串) Hash(哈希) List(列表) Set(集合) zset(sorted set:有序集合)

  6. JavaScript - String对象，字符串，String包装类型

    1. 字符串 1.1 字符串的不可变性 var str = 'abc'; str = 'hello'; // 当重新给str赋值的时候,常量'abc'不会被修改,依然在内存中 // 重新给字符串赋值, ...

  7. static关键字的作用是什么？

    static的作用:常用来修饰变量. 全局变量被static修饰后,就称之为静态全局变量:局部变量被static修饰后,就称之为静态局部变量.统称为静态变量. 如果需要进一步解释下面的现象,可以了解i ...

  8. Unity热更新对比

    https://www.jianshu.com/p/f9d90edf4a7c Unity 热更新为啥用Lua 详解 ILRuntime的优势 同市面上的其他热更方案相比,ILRuntime主要有以下优 ...

  9. ipmitool命令

    1.remote access control powerIpmitool -I lanplus -H 192.168.0.10 -U username -P Password chassis pow ...

  10. MySQL之关系

    目录 关系 多对多的关系,如何通过mysql来表示 一对一关系 关系 多对多的关系,如何通过mysql来表示 站在老师的角度 一个老师可以教多个学生, 一个老师也可以教一个学生. 站在学生的角度 一个 ...