记录一下——vue的走马灯carousel使用v-for时的坑

vue的走马灯carousel使用v-for的双重循环出现页面未随数组的改变而更新，并且F5刷新页面也没有用，问题是在于将数组存入对象时vue未重新渲染出来，需要使用this.$forceUpdate() 进行强制的刷新

<el-carousel trigger="click" arrow="never">
          <el-carousel-item v-for="(Item,index) in hotMovie" :key="index" style="width:1260px;">
            <el-col :span="8" v-for="item in Item" :key="item.Id">// 双层循环，出现页面未渲染的问题
              <el-card :body-style="{ padding: '0px',margin: '0px' }" shadow="never">
                <div class="imgBox">
                  <img src="../../assets/img/homePage/themoonandthewell.png" />
                </div>
                <div class="line">
                  <p>{{item.Name}}</p>
                  <p>
                    <span>{{item.artist}}</span>
                  </p>
                  <p>
                    <i class="el-icon-video-camera">
                      <span class="number">{{item.num}}</span>
                    </i>
                  </p>
                  <div class="bottom clearfix"></div>
                </div>
              </el-card>
            </el-col>
          </el-carousel-item>
        </el-carousel>

methods: {
    getHomeInfo () {
      axios.get(url)
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.code === 1) {
        var k = 0
        console.log(res)
        for (var e = 0; e <= (res.data.length / 3); e++) {
          let arr = {}
          for (var i = 0; i < 3; i++) {
            arr[i] = res.data[k++]
            if (k === res.data.length) {
              break
            }
          }
          this.hotMovie[e] = arr
        }
        this.$forceUpdate() //解决方法，使用 this.$forceUpdate()来强制vue进行组件的重新渲染
        console.log(this.hotMovie)
      }
    }
  },
  mounted () {
    this.$nextTick(this.getHomeInfo())
  }