本文介绍了vuejs slick无法使用v-for的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
vue-slick可以正常使用静态内容。但是,当我试图循环播放user.slick的播放列表时,无效。
vue-slick is working fine with static content. But when I am trying to loop through playlists of user.slick is not working.
html part:
html part:
<template>
<slick ref="slickone" :options="slickOptions">
<div v-for='playlist in user_playlists'>
<a href="#">
<img :src="playlist.image">
<p>Playlist Name</p>
</a>
</div>
</slick>
</template>
脚本部分:
<script>
import Slick from 'vue-slick';
import './node_modules/slick-carousel/slick/slick.css';
import './node_modules/slick-carousel/slick/slick-theme.css';
export default {
data() {
return {
user_playlists: [],
slickOptions: {
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
autoplaySpeed: 5e3,
},
};
},
methods: {
getUserPlaylists() {
this.$http.get('api/user_playlists/user-playlists')
.then(response => {
this.user_playlists = response.body.data;
this.$refs.slickone.reSlick();
});
},
updated() {
this.reInit();
},
reInit() {
this.$refs.slickone.reSlick();
},
},
components: {
'slick': Slick,
},
watch: {
profileData() {
this.getUserPlaylists();
},
user_playlists() {
this.reInit();
}
}
}
</script>
我检查了文档并使用了这个。$ ref.slickone.reSlick ()
但仍然没有用。
I have checked the documentation and used this.$ref.slickone.reSlick()
but still it's not working.
推荐答案
我有类似的问题,但我更新了状态只有一次。对我来说,解决方案是:
I have a similar problem, but I update the state only once. For me solution is:
beforeUpdate() {
if (this.$refs.slick) {
this.$refs.slick.destroy();
}
},
updated() {
this.$nextTick(function () {
if (this.$refs.slick) {
this.$refs.slick.create(this.slickOptions);
}
});
},
也许这会对你有帮助。
这篇关于vuejs slick无法使用v-for的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!