CODEWITHSUNDEEP
vue.jsvue-router
Lovelock
Lovelock

Reputation: 8075

vue-router view caching / not resetting data

Im working on a car sales website and using vue-router.

I have an index page with a list of all cars for sale, and then when clicked they link to the single view of that specific vehicle.

I have a large 'header' image on the single view page and have it inside a container with a fixed height so that when the page loads there is not jumping in page height.

When going to this single view, I do an API call to get the vehicle data and then wish to fade in the heading image.

To do this:

 <div class="singleVehicle__mainImage">
     <span :style="styles" :class="{'imageLoaded' : mainImageLoaded }" v-if="vehicle"></span>
 </div>

 export default {
    data() {
        return {
            vehicle: null,
            styles: {
                backgroundImage: null
            },
            mainImageLoaded: null
        }
    },
    created() {
        this.getVehicle().then(() => {
            this.mainImageBackground();
        });
    },
    methods: {
        mainImageBackground() {
            var source = "IMAGE SOURCE URL";
            this.styles.backgroundImage = "url("+source+")";

            var $this = this;
            var img = new Image();
            img.onload = function() {
                $this.mainImageLoaded = true;
            }
            img.src = source;
            if (img.complete) img.onload();
        }
    }
}

By default, the span inside the image wrapper has a 0 opacity and then that is transitioned to 1 when the .imageLoaded class is added.

This works fine, but only the first time each vehicle loaded. The image waits till it loads and then fades in. Everyother time afterwards the image simply pops in when it loads almost like the imageLoaded class is not being reset / the data is not being reset when leaving the view.

When clearing browser cache, it works again but once for each vehicle view.

Upvotes: 0

Views: 696

Answers (1)

jostrander
jostrander

Reputation: 754

This is probably due to your v-if="vehicle". The vehicle call is possibly taking longer and so the span is not showing until after the class is added or some timing issue related to that.

Upvotes: 1

Related Questions