Question

我正在使用vue-slick来显示我的图像。我已经尝试了所有发现的解决方案..但没有一个起作用。

这是我的模板：

<slick ref="slick" :options="slickOptions">
 <img v-for="(item) in categories"  :src="'/images/category/'+item.image_url" alt="" class="img-fluid" >
</slick>

这是我的脚本：

 data () {
        return {
            categories:'',
            slickOptions: {
                dots: true,
                infinite: false,
                autoplay: false,
                arrows : false,                    
                draggable:true,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
            },
        }
    },
     mounted() {
        let _this = this;
        axios({
            method: 'post',
            url: '/api/category',
            data : {'name' : _this.name}
        }).then( (response)=> {
            console.log(response.data.data);
            _this.categories = response.data.data;
        }).catch((error) => {
            console.log(error.response)
        });
    },
    methods:{
        next() {
            this.$refs.slick.next();
        },

        prev() {
            this.$refs.slick.prev();
        },
        reInit() {                
            this.$refs.slick.reSlick()
        }
    },

仅加载图像，并且光滑效果不佳... !!？

Answer 1

使用下面的代码重新初始化滑动，并调用成功的响应函数

reInit（）{

let currIndex = this.$refs.slick.currentSlide()
this.$refs.slick.destroy()
this.$nextTick(() => {
    this.$refs.slick.create()
    this.$refs.slick.goTo(currIndex, true)
})

}

Answer 2

我假设您的Axios正在使用您要查找的结构返回数据。

我还假设您使用的是vue-slick组件，而不是光滑的。

您应按照文档中所述遍历DIV。没有Axios，我是这样做的：

在模板中：

<slick ref="slick" :options="slickOptions">
      <div>Escolhe uma configuração...</div>
      <div v-for="d in data1"><a class="inline" :href="d.image"><img :src="d.image" alt="">{{ d.text }}</a></div>       
</slick>

使用Javascript ：

data: function() {
    return {
        data1: [
          {  image: 'http://placehold.it/100x100', text: 'Config1' }, 
          {  image: 'http://placehold.it/100x100', text: 'Config2' }, 
          {  image: 'http://placehold.it/100x100', text: 'Config3' }, 
          {  image: 'http://placehold.it/100x100', text: 'Config4' } 
        ]
    }

Answer 3

我也遇到过同样的问题，而我要解决的是将
v-if="categories.length > 0"标签上的<slick>。

这使得在要显示的数据首先包含该数据之前不会创建浮雕。

具有动态数据的Vue-Slick和v-for

3 个答案: