在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. js里常见的三种请求方式$.ajax、$.post、$.get分析

    $.post和$.get是$.ajax的一种特殊情况: $.post和$.get请求都是异步请求,回调函数里写return来返回值是无意义的, 回调函数里对外部变量进行赋值也是无意义的. 即使是$.a ...

  2. 修改oracle数据库用户密码的方法

    WIN+R打开运行窗口,输入cmd进入命令行: 输入sqlplus ,输入用户名,输入口令(如果是超级管理员SYS的话需在口令之后加上as sysdba)进入sql命令行:    连接成功后,输入“s ...

  3. 第三节：Vuejs常用特性2和图书案例

    一. 常用特性2 1. 监听器 用watch来响应数据的变化, 一般用于异步或者开销较大的操作, watch 中的属性 一定是data 中 已经存在的数据!!! 当需要监听一个对象的改变时,普通的wa ...

  4. centos解决bash: telnet: command not found...&& telnet: connect to address 127.0.0.1: Connection refused拒绝连接

    检查telnet是否已安装: [root@hostuser src]# rpm -q telnet-serverpackage telnet-server is not installed[root@ ...

  5. Python 之并发编程之线程中

    四.线程锁lock(线程的数据安全) 在数据量较大的时候,线程中的数据会被并发,所有数据会不同步,以至于数据会异常. 下面还介绍了两种的上锁方法. 例: from threading import T ...

  6. docker 的实践操作

    查看版本信息 [root@k8s-1 ~]# docker version Client: Version: 18.09.6 API version: 1.39 Go version: go1.10. ...

  7. 吴裕雄--天生自然PYTHON爬虫：使用Selenium爬取大型电商网站数据

    用python爬取动态网页时,普通的requests,urllib2无法实现.例如有些网站点击下一页时,会加载新的内容,但是网页的URL却没有改变(没有传入页码相关的参数),requests.urll ...

  8. 1003 Emergency (25分) 求最短路径的数量

    1003 Emergency (25分)   As an emergency rescue team leader of a city, you are given a special map of ...

  9. LeetCode633. Sum of Square Numbers（双指针）

    题意:给定一个非负整数c,确定是否存在a和b使得a*a+b*b=c. class Solution { typedef long long LL; public: bool judgeSquareSu ...

  10. matplotlib 柱状图 Bar Chart 样例及参数

    def bar_chart_generator():     l = [1,2,3,4,5]     h = [20, 14, 38, 27, 9]     w = [0.1, 0.2, 0.3, 0 ...