zoukankan      html  css  js  c++  java
  • "(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>
  • 相关阅读:
    java程序后台报错java.net.SocketException: Too many open files
    linux中,查看某个命令是来自哪个RPM包或者是通过哪个RPM包安装的
    Oracle卸载之linux快速卸载rac脚本-一键卸载
    40个DBA日常维护的SQL脚本
    Oracle SQL开发 之 Select语句完整的执行顺序
    Oracle开发 之 主-外键约束FK及约束的修改
    drop user 报错ora-00604
    oracle Bug 4287115(ora-12083)
    Ora-1157 ora-1110错误解决案例一枚
    rac库grid目录权限(6751)导致数据库宕机案例 此方法仅用于紧急救助
  • 原文地址:https://www.cnblogs.com/shiyiersan/p/12046394.html
Copyright © 2011-2022 走看看