"(error during evaluation)" computed
在vue-cli搭建的去哪网app项目中使用了 computed 计算属性
computed计算属性在chrome插件中的 vue devtools 插件中报错

应该显示出来 computed 属性的下拉列。
正确显示如下,这里右下角正确的显示出了computed , 求助报错原因!!!

代码如下:(红色代码处!)
<template>
<div class="icons">
<swiper>
<swiper-slide>
<div class="icon" v-for="item of iconList" :key="item.id">
<div class="icon-img">
<img class="icon-img-content" :src="item.imgUrl">
</div>
<p class="icon-desc">{{ item.desc }}</p>
</div>
</swiper-slide>
</swiper>
</div>
</template> <script>
export default {
name: 'HomeIcons',
data() {
return {
iconList: [{
id: '0001',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/piao.png',
desc: '景点门票'
},
{
id: '0002',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/hotel.png',
desc: '酒单'
},
{
id: '0003',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/flight.png',
desc: '机票'
},
{
id: '0004',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/package.png',
desc: '度假'
},
{
id: '0005',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/train.png',
desc: '火车票'
},
{
id: '0006',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/innBnb.png',
desc: '民宿客栈'
},
{
id: '0007',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/bargainflight.png',
desc: '低价机票'
},
{
id: '0008',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/group.png',
desc: '特惠酒店'
},
{
id: '0009',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/haiwai.png',
desc: '海外酒店'
}]
}
},
computed: {
pages () {
const pages = []
this.iconList.forEach((item, index) => {
const page = Math.floor(index / 8)
if(!pages[page]) {
this.pages = []
}
pages[page].push(item)
})
return pages
} }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.icons >>> .swiper-container
height 0
padding-bottom 50%
.icon
position relative
overflow hidden
float left
width 25%
height 0
padding-bottom 25%
.icon-img
position absolute
left 0
right 0
top 0
bottom .44rem
box-sizing border-box
padding .1rem
.icon-img-content
height 100%
display block
margin 0 auto
.icon-desc
position absolute
left 0
right 0
bottom 0
height .44rem
line-height .44rem
text-align center
color $darkTextColor </style>
"(error during evaluation)" computed的更多相关文章
- Python2.7.6标准库内建函数
Built-in Functions abs() divmod() input() open() staticmethod() all() enumerate() int() ord( ...
- Python中的内置函数
2.1 Built-in Functions The Python interpreter has a number of functions built into it that are alway ...
- 论文翻译——Dynamic Pooling and Unfolding Recursive Autoencoders for Paraphrase Detection
Dynamic Pooling and Unfolding Recursive Autoencoders for Paraphrase Detection 动态池和展开递归自动编码器的意译检测 论文地 ...
- Junit4断言
Junit4断言API: http://junit.org/javadoc/latest/index.html Constructor Summary protected Assert() ...
- 深入浅出OOP(六): 理解C#的Enums
MSDN定义:枚举类型(也称为枚举)为定义一组可以赋给变量的命名整数常量提供了一种有效的方法. 例如,假设您必须定义一个变量,该变量的值表示一周中的一天. 该变量只能存储七个有意义的值. 若要定义这 ...
- Matrix Chain Multiplication[HDU1082]
Matrix Chain Multiplication Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
- UVA 442 二十 Matrix Chain Multiplication
Matrix Chain Multiplication Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %l ...
- UVa 442 矩阵链乘(栈)
Input Specification Input consists of two parts: a list of matrices and a list of expressions. The f ...
- Cross Validation done wrong
Cross Validation done wrong Cross validation is an essential tool in statistical learning 1 to estim ...
随机推荐
- 数据库Oracle日期函数
SYSDATE 函数:是一个日期函数,它返回当前数据库服务器的日期和时间. 用日期计算: • 从日期加或者减一个数,结果是一个日期值 • 两个日期相减,得到两个日期之间的天数 ,可以加小时到日期上 S ...
- C#语言和SQL Server数据库技术_My Bank银行系统
第一个类: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...
- Selenium 4.0 Alpha更新日志
早在2018年8月,整个测试自动化社区就发生了一件重大新闻:Selenium的创始成员Simon Stewart在班加罗尔Selenium会议上正式确认了Selenium 4的发布日期和一些重要更新. ...
- 重排数列-Java实现(2018网易校招研发岗)
题目: 链接:https://www.nowcoder.com/questionTerminal/6c184566ecff4d3baff3536449d4a3e2 来源:牛客网 小易有一个长度为N的正 ...
- 02 | Java内存模型:看Java如何解决可见性和有序性问题
什么是 Java 内存模型? 导致可见性的原因是缓存,导致有序性的原因是编译优化,那解决可见性. 有序性最直接的办法就是禁用缓存和编译优化,但是这样问题虽然解决了,我们程序的性能可就堪忧了. 合理 ...
- 10分钟理解BFC原理
10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...
- DataTable和DataReader的遍历
1.DataTable的遍历 //创建数据表 DataTable dt = GetDataTable("select * from Student"); //存储数据 String ...
- Docker+DokcerFile 简单命令和简单镜像配置----Tomcat+jdk+centos7
宿主机描述:docker info (自身的描述)docker --helpdocker images(查看所有镜像)docker images -adocker images -q(显示镜像ID)d ...
- C#中怎样获取默认配置文件App.config中配置的键值对内容
场景 在新建一个程序后,项目中会有一个默认配置文件App.config 一般会将一些配置文件信息,比如连接数据库的字符串等信息存在此配置文件中. 怎样在代码中获取自己配置的键值对信息. 注: 博客主页 ...
- 在 Spring Boot 项目中使用 activiti
新建springBoot项目时勾选activiti,或者在已建立的springBoot项目添加以下依赖: <dependency> <groupId>org.activiti& ...