ragnarlotus/vue-flux

Empty fluxImages array at the beginning

Closed this issue ยท 6 comments

Sorry it's me again but I found an issue. I'm pushing into fluxImages array images after some custom event in created hook. When code is:

data () {
    return {
        building: {},
        offerSlider: {},
        fluxOptions: {
            autoplay: true,
            delay: 5000,
        },
        fluxImages:
            [
                "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZWBo1ZVmU7lYf3JNu7EIPJ4C2xf4rYX_KusfVVT_9onIlh8pp",
                "https://media.rightmove.co.uk/dir/crop/10:9-16:9/9k/8227/72822785/8227_PRA11884_IMG_00_0000_max_476x317.JPG"
            ]
        ,
        fluxTransitionsOffer: {
            transitionSlide: Transitions.transitionSlide
        }

    };
},
created() {
    eventBus.$on('loadedOffer', (data) => {
        this.building = data;
        this.fluxImages = data.imagesLink.split(',');
        console.log(this.fluxImages);
        this.$refs.offerSlider.preloadImages(this.fluxImages);
    })
}

I have in fluxImages some random images (i need minimum 2) from google and on created hook I'm replacing this array so in the end slider using my images and everything works fine. But when I change fluxImages array to empty array or to array with just one image like this:

data () {
    return {
        building: {},
        offerSlider: {},
        fluxOptions: {
            autoplay: true,
            delay: 5000,
        },
        fluxImages:
            []
        ,
        fluxTransitionsOffer: {
            transitionSlide: Transitions.transitionSlide
        }

    };
},
created() {
    eventBus.$on('loadedOffer', (data) => {
        this.building = data;
        this.fluxImages = data.imagesLink.split(',');
        console.log(this.fluxImages);
        this.$refs.offerSlider.preloadImages(this.fluxImages);
    })
}

then transition stop working it still change images but without any transition. And last thing which is a litle weird is that when I have this second code with empty array but I change fluxTransitionOffer to just Transitions then it works fine (with animations) but after some time like a few minutes it stop using animations and print errors into console.

[Vue warn]: Error in render: "RangeError: Invalid array length"
found in
---> at FluxGrid.vue
at waterfall.vue
at VueFlux.vue

RangeError: Invalid array length

Version 4.1.0. At the moment I'll just leave it with 2 random images from google and then replacing array but it's not really convenient.

I have an idea of what is happening, I will update the code so you can update images whenever you want.

Hello!, there is a new release, I added a changelog section in wiki. Check it and let me know if you have any doubt :)

Did you test it? works as expected?

I have not test it yet. I'll try tomorrow.

Well I think it's working correctly now without using this .preloadImages function I'm just assigning like this this.fluxImages = data.imagesLink.split(','); and it's okey. I'll let you know if I spot something.

Great, thank!