How to run Resize on load? about vue-flickity HOT 8 OPEN

Maybe try this:

methods: {
  resize () {
    this.$refs.flickity.resize()
  }
},

mounted () {
  this.$nextTick(() => {
    this.resize()
  })
}

from vue-flickity.

Thanks a lot for the reply. Unfortunately nothing changes on my end.
I put a console.log below the nextTick just to make sure it was being fired and I did see the console.log.

methods: {
    resize() {
      this.$refs.flickity.resize();
    },
  },
 mounted () {
    this.$nextTick(() => {
      this.resize()
    })
      console.log("This.resize was fired but did nothing")
  },

from vue-flickity.

Any solution for this problem?

from vue-flickity.

Any solution for this problem?

I use setTimeout with 1 second but it not a good idea!

resize() { setTimeout(() => { this.$refs.flickity.resize(); },1000); }

from vue-flickity.

Use this.$refs.flickity.rerender(); instead of this.$refs.flickity.resize();

works for me ;)

from vue-flickity.

@EnzoBatista Hm, interesting! That doesn't work for me, I can't seem to find this rerender() method in the flickity api or on the flickity object. Can you tell us a bit more?

from vue-flickity.

@emdahlstrom Dude, i've used rerender() method in nuxt like this this.$refs.flickity.rerender();, but i think it's available in react js too and in some way you can do this in vue js

from vue-flickity.

Use this.$refs.flickity.rerender(); instead of this.$refs.flickity.resize();

works for me ;)

Not work for me now :/ we're using SSR btw maybe that's why didn't work

from vue-flickity.