关于vue使用传递数据

Question

使用axios渲染数据，vue中组件传递数据

icon.vue

<template>
  <div class="icons">
    <swiper>
      <swiper-slide>
        <div class="icon" v-for="(item,index) in secondSlide" :key="index">
          <div class="icon-img">
            <img class="icon-imgs" :src="item.imgUrl">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="icon" v-for="(item,index) in firstSlide" :key="index">
          <div class="icon-img">
            <img class="icon-imgs" :src="item.imgUrl">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  props: {
    list: Array
  },
  data () {
    return {
      firstSlide: [],
      secondSlide: []
    }
  },
  created () {
    this.list.forEach((item, index) => {
      if (index >= 8) {
        this.firstSlide.push(item)
      } else {
        this.secondSlide.push(item)
      }
    })
  }
}
</script>

index.vue

<div>
    <HomeHeader :city="city"></HomeHeader>
    <HomeBanner :bannerList="swiperList"></HomeBanner>
    <HomeIcon :list="IconList"></HomeIcon>
    <Recommed></Recommed>
    <Weekend></Weekend>
  </div>
</template>

<script>
import HomeHeader from '@/components/header'
import HomeBanner from '@/components/swiper'
import HomeIcon from '@/components/icons'
import Recommed from '@/components/Recommend'
import Weekend from '@/components/Weekend'
import axios from 'axios'
export default {
  data () {
    return {
      city: '',
      swiperList: [],
      IconList: []
    }
  },
  components: {
    HomeHeader,
    HomeBanner,
    HomeIcon,
    Recommed,
    Weekend
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.IconList = data.iconlist
      }
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

结果就是页面上图标不显示

Answer 1

子组件的created中用setTimeout试一下

Answer 2

看看数据有没有传icon.vue里面,如果有就是swiper组件下面的高度没设置，给他设置个高度就行

Answer 3

created () {
    this.list.forEach((item, index) => {
      if (index >= 8) {
        this.firstSlide.push(item)
      } else {
        this.secondSlide.push(item)
      }
    })
  }

created()只会执行一次，在异步请求之前，首次创建组件的时候。
父组件执行异步请求，更改了this.IconList，更改之后没有执行created()，所以最后得到的firstSlide和secondSlide都是空。
所以你需要一个watch

watch:{
    list:function(newVal,oldVal){
      this.list.forEach((item, index) => {
          if (index >= 8) {
            this.firstSlide.push(item)
          } else {
            this.secondSlide.push(item)
          }
        })
    }
  },