2回答

好帮手慕久久

2021-03-11

同学你好，解答如下：

由于data中的数据是处于被监控的状态，而同学在sortList中频繁的修改了this.list的值，所以vue报了一个警告，含义大致是“在HomeBottom组件中，频繁修改data()中的属性值，可能触发无限循环”。所以建议把对list排序的代码放到其他函数中写，例如生命周期函数mounted中写，如下：

​

由于同学的问题并不属于课内问题，但是看同学比较认真，所以老师破例为你解决一次。建议同学再遇见问题，要想办法自己去尝试解决，毕竟老师能帮你的次数有限。

对于同学而言，遇到问题、解决问题会是工作中的一个常态，同学要一点点学会怎么解决问题。可以问其他同事、可以搜索资料，一定要自己去思考，这样同学才能走的更远。

祝学习愉快！

0

好帮手慕久久

2021-03-11

同学你好，从报错上看，是组件有问题：

​

建议同学重点检查一下截图中提到的几个组件书写、使用是否正确。

如果是跟着视频中的项目敲的代码，可以把相关代码粘贴出来，老师放在源码中帮你测试一下。如果是自己课外的内容，建议采用如下方式调试下:

先把目标文件中的组件都删除，再一个个粘贴回来，粘了哪个组件后报错，就说明哪个组件有问题。

祝学习愉快！

0

hunaliu

hp>老师 我找到是哪个组件的问题 但是不知道是报的是啥问题，这是代码

<template>
  <div class="businessRanked wrap">
    <h3>企业成果排名</h3>
    <ul>
      <li class="item" v-for = "(item,index) of list" :key ="item.index">
        <div class="designation">
          <span class="index" :class="[{'topThree': index < 3 ? 'topThree' :''}]">{{index + 1}}</span>
          <span class="name">{{item.company}}</span>
          <span class="amout">{{item.amount}}</span>
        </div>
        <div class="progressBar">
          <span :style = {width:sortList(item.amount)}></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeBottom",
  methods:{
     sortList(val) {
        function sortId(a,b){  
            return b.amount-a.amount  
        }
        this.list.sort(sortId);
        let maxAmount = Math.max.apply(Math, this.list.map(item=>item.amount));
        return parseInt(val) / parseInt(maxAmount) * 100 + '%'
      }
    },
    data () {
      return {
         list: [
             {
                 id: '001',
                 company: '中国宝武钢铁集团有限公司',
                 amount: '180'
             }, {
                id: '002',
                company: '中国宝武钢铁集团有限公司',
                amount: '172'
             }, {
                id: '003',
                company: '中国宝武钢铁集团有限公司',
                amount: '160'
             }, {
                id: '004',
                company: '中国宝武钢铁集团有限公司',
                amount: '119'
             }, {
                id: '005',
                company: '中国宝武钢铁集团有限公司',
                amount: '50'
             }, {
                id: '006',
                company: '中国宝武钢铁集团有限公司',
                amount: '189'
             }, {
                id: '007',
                company: '中国宝武钢铁集团有限公司',
                amount: '99'
             }, {
                id: '008',
                company: '中国宝武钢铁集团有限公司',
                amount: '50'
             }
         ] 
      }
  }
};
</script>

<style scoped>
  .wrap{
    margin-bottom:0.25rem;
    }
  .businessRanked h3{
    width: 100%;
    text-align: center;
    font-size: 0.18rem;
    color: #74daf8;
    font-weight: 600;
    height:47px;
    line-height: 44px;
}

  .businessRanked >>>.designation .topThree.index{border: 0.01rem solid #ff7e00;border-radius: 50%;color: white;font-size: 0.2rem;}
  .businessRanked ul li .progressBar, .provinceRanked ul li .progressBar{width: 100%;
    height: 0.1rem;
    border: 0.01rem solid #0a7199;
    border-radius: 0.07rem;
    padding: 0.02rem;}
  .designation .index{width: 0.25rem;
    height: 0.25rem;
    line-height: 0.25rem;
    text-align: center;
    border-radius: 50%;
    color: white;
    font-size: 0.2rem;
    position: absolute;
    top: 0.05rem;
    left: 0.1rem;
   }
   .businessRanked ul{padding-bottom:0.1rem;}
   .businessRanked ul li {
     position: relative;
     margin-top: 0.17rem;
     padding: 0 0.25rem 0 0.4rem;
    }
 .businessRanked ul li .progressBar span, .provinceRanked ul li .progressBar span{
    display: block;
    height: 100%;
    background: -webkit-linear-gradient(left, #00eaff, #0c8bf4);
    background: linear-gradient(90deg, #00eaff, #0c8bf4);
    border-radius: 0.04rem;}
.businessRanked ul li .designation,.provinceRanked ul li .designation{
    height: 0.14rem;
    font-size: 0.1rem;
    line-height: 0.14rem;
    margin-bottom: 0.09rem;
}
.businessRanked ul li .designation .amout {
    color: #74daf8;
    float: right;
}
.resultScreen .businessRanked ul li .designation {
    color: white;
    text-align: left;
    float: left;
}
</style>

<template>
  <div>
      <swiper class="mySwiper" ref="mySwiper" :options="swiperOptions">
        <swiper-slide class="screen2 screen">
            <div class="datawrap">
                <div class="dataleft">
                    <home-left></home-left>
                    <home-bottom></home-bottom>
                </div>
                <div class="datacom">
                    <home-map></home-map>
                </div>
                <div class="dataright">
                    <home-right></home-right>
                    <!-- <home-bottom></home-bottom> -->
                </div>
            </div>
        </swiper-slide>
        <swiper-slide class="screen3 screen">
            <home-human></home-human>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
import HomeLeft from './components/Left'
import HomeMap from './components/Chinamap'
import HomeRight from './components/Right'
import HomeBottom from './components/Bottom'
import HomeHuman from './components/Human'

export default {
  name: 'Home',
  components: {
    HomeLeft,
    HomeMap,
    HomeRight,
    HomeBottom,
    HomeHuman
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        // autoplay:4000,
        loop:true,
        loopedSlides :2,
        loopAdditionalSlides : 2, //loop模式下slides数量增加个数
        centeredSlides: true,
        slidesPerView: 'auto'
      }

    }
  }
}
</script>

<style scoped>
    .screen.swiper-slide-prev{-webkit-transform: rotateY(60deg);transform: rotateY(60deg);}
    .screen.swiper-slide-next{-webkit-transform: rotateY(-60deg);transform: rotateY(-60deg);}
    .swiper-slide{height:100vh;}
    .screen3{background-image: url(../assets/img/figureHall.png);background-size: 100% 100%;}
    .screen2{background-image: url(../assets/img/resultScreen.png);background-size: 100% 100%;}
    .datawrap{
        width: 1200px;
        height: 90vh;
        border-radius: 0.1rem;
        color: #fff;
        background-image: url(../assets/img/resultScreenBoxbg.png);
        background-size: 100% 100%;
    }
    .mySwiper.swiper-container {
        width: 100vw;
        margin:0 auto;
        background: #f7f7f7;
        height: 100vh;
        color: #fff;
        text-align: center;
        position:relative;
        }
        .mySwiper .swiper-slide {
        height: 100%;
        width: 80vw;
        }
    .mySwiper{
     /* width: 12rem;
    height: 100%; */
    margin: 0 auto;
    position: relative;}
    /* .swiper-container{position: absolute; top: 0; left: 50%; margin-left: -500px; width: 1000px;} */
    /* .swiper-slide{overflow:hidden;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
    */
   /* .swiper-slide{width: 1000px !important;} */
   .wrap{
    /* width: 4.83rem; */
    width: 100%;
    min-height:3rem;
    background-image: url(../assets/img/rankedBg.png);
    background-size: 100% 100%;
    overflow: hidden;}
    .dataleft{ float:left;width:25%;}
    .dataright{ float:left;width:25%;}
    .datacom{float: left;width: 50%;height: 8rem;}
</style>

​

h021-03-11

共1条回复