"(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 ...
随机推荐
- unity3d 随机添加树木
开放世界随机地图才是最重要的.. 随机生成树木 Terrain.terrainData //获取地形设置 terrainData.treePrototypes {get;set;} //获取或设置树木 ...
- 3- 设置断点修改Response
以下是借鉴别人的知识分享.我在这里转载,如有冒犯,还请告知. 只要你会设置断点修改请求内容的话,这个设置断点修改响应内容的方法也是一样的,只需要修改一下命令即可. 修改响应内容也有两种方法: 第一种: ...
- 小白进阶之路—python脚本(1)判断是否是一个目录
#!/usr/bin/env python# -*- coding: utf-8 -*-import os dir = "/var/www/html/EnjoyWeekend/" ...
- 【JS】303- 编写更好的 JavaScript 条件式和匹配条件的技巧
译者:@chorer 译文:https://chorer.github.io/2019/06/24/Trs-更好的JavaScript条件式和匹配标准技巧/作者:@Milos Protic原文:htt ...
- css修改overflow滚动条默认样式
html代码 <div class="inner"> <div class="innerbox"> <p style=" ...
- SpringBoot初探JSP页面可能遇到的坑
第一个坑就是依赖没有配了 网上很多依赖的配置代码 在pom.xml文件的dependencies添加以下依赖 <!-- servlet依赖 --> <dependency> & ...
- CDN原理加速解析
CDN概念 CDN全称叫做“Content Delivery Network”,中文叫内容分发网络. 原理分析 我们知道,当我们使用域名访问某一个网站时,实际上就是将请求包(以Http请求为例)通 ...
- HA Joker Vulnhub Walkthrough
下载地址: https://www.vulnhub.com/entry/ha-joker,379/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.132Starti ...
- iOS:bugly符号表上传
https://blog.csdn.net/weixin_38633659/article/details/81667721 这个篇文章已经讲得足够清楚 而且官方的文档也写得很好(注意官方网站上的文档 ...
- Linux Pptpd
准备环境 1 主机ip:192.168.0.107 2 VPN服务器: ens32:192.168.0.102 ens33:127.16.1.10 软件安装 [root@localhost ~]# y ...