How to run Resize on load?

[p3lican]

Hoping someone can help with this issue.

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

  beforeMount() {
    this.resize()
  }

This is not working. I'm getting: [Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'resize' of undefined"

if I use mounted() I don't get an error but the slides aren't resized.

If I put it in a button, resize works on click: <button @click="resize()">Resize That

[OriginalEXE]

Maybe try this:

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

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

[p3lican]

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")
  },

[bardiaabasirad]

Any solution for this problem?

[bardiaabasirad]

Any solution for this problem?

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

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

[EnzoBatista]

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

works for me ;)

[emdahlstrom]

@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?

[EnzoBatista]

@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

[mihalidis]

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