swiper初始化过早的解决办法 及 使用网络请求到数据之前初始为空报错问题解决

swiper初始化过早解决

<template>
    <div>
        <!-- 
	        swiper初始化过早，
	        在swiper标签上加个:key，随着数组长度变化根据Diff算法动态更新 
        -->
        <swiper :key="looplist.length">
            <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
                <img :src="data.imgUrl"/>
            </div>
        </swiper>
        <div>film-导航头</div>
        <router-view></router-view>
    </div>
</template>

<script>
import swiper from '@/views/Film/Swiper'
import axios from 'axios'
export default {
  components: {
    swiper
  },
  data () {
    return {
      looplist: []
    }
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=110100&k=5553387',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      console.log('轮播图获取', res.data)
      this.looplist = res.data.data
    })
  }
}
</script>


//组件定义：Swiper.vue
<template>
  <div class="swiper-container filmswiper">
    <div class="swiper-wrapper">
        <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination film-swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 是.js文件
import 'swiper/dist/css/swiper.css' // 注意还要引入swiper.css样式
export default {
  mounted () {
    // 找到类名为filmswiper的标签初始化
    new Swiper('.filmswiper', {
      loop: true,
      autoplay: {
        delay: 2000
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  .swiper-wrapper{
    img{
      width:100%;
    }
  }
</style>

初始化为空，请求数据还未拿到

<template>
    <!-- 重点：因为一开始filmInfo初始为null，当axios请求数据回来后，再显示该元素，防止空数据报错 -->
    <div v-if="filmInfo">
        <h2>{{filmInfo.name}}</h2>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ['myid'],
  data () {
    return {
      filmInfo: null
    }
  },
  mounted () {
    // console.log('要获得的跳转id详情信息', this.$route.params.myid, this.myid)
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.myid}&k=4359832`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filmInfo = res.data.data.film
    })
  }
}
</script>