在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. sort、uniq 、 join 、 comm、diff 、 patch 、df、du 和 time 命令的用法

    1 sort 命令 同文本文件打交道时,总避不开排序,那是因为对于文本处理任务而言,排序(sort)可以起到不小的作用.sort 命令能够帮助我们对文本文件和 stdin 进行排序操作.通常,它会结合 ...

  2. 奖学金(0)<P2007_1>

    奖学金 (scholar.pas/c/cpp) [问题描述] 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分 ...

  3. selenium+chrome options

    selenium+chrome options 环境:selenium chrome 1.      selenium + chrome参数配置 1.1.    启动 from selenium im ...

  4. 一 Spring概述

    知识点概要: 1 SpringIOC入门(XML).Spring的Bean管理.Spring属性注入 2 SpringIOC注解方式.Spring的AOP开发(XML) 3 Spring的AOP注解开 ...

  5. mybatis+spring boot+vue

    参考https://www.cnblogs.com/wlovet/p/8317282.html

  6. python字符记录

    所有的字符方法论 # -*- coding: utf-8 -*- 2 #__author__ = 'Administrator' 3 4 name = "my name is {name} ...

  7. 列举出给定数量的字符的所有组成情况-java实现

    老早以前刚学程序的时候碰到了这么个问题,当时没想出来,今天突然想起来了这么个问题于是写了下,也算留个纪念吧 public static String itr; public static void m ...

  8. Linux：vi & vim（待学）

    VI编辑器_终端编辑器 目标 vi简介 打开和新建文件 三种工作模式 常用命令查询 1 简介 1.1 学习vi的目的 在工作中, 要对 服务器上的 文件进行 简单 的修改, 可以使用 ssh 登录到远 ...

  9. spring SpEL--转

    原文:http://www.tuicool.com/articles/Jbq2QnM 概要: Spring表达式语言:SpEL Spring表达式语言 (简称 SpEL ):是一个 支持运行时查询和操 ...

  10. 深浅copy浅析

    Python代码在开始执行的时候,代码会被系统从硬盘调入内存,等候CPU执行,至于怎么个调入逻辑,还不清楚. 在高级语言中,变量是对内存及其地址的抽象.也就是说变量就是内存地址. 那么我们先来介绍两种 ...