记录一下——vue的走马灯carousel使用v-for时的坑
vue的走马灯carousel使用v-for的双重循环出现页面未随数组的改变而更新,并且F5刷新页面也没有用,问题是在于将数组存入对象时vue未重新渲染出来,需要使用this.$forceUpdate() 进行强制的刷新<el-carousel trigger="click" arrow="never"><el-carousel-item 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())
}
更多推荐
已为社区贡献2条内容
所有评论(0)