vue-flickity
vue-flickity copied to clipboard
How to run Resize on load?
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
Maybe try this:
methods: {
resize () {
this.$refs.flickity.resize()
}
},
mounted () {
this.$nextTick(() => {
this.resize()
})
}
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")
},
Any solution for this problem?
Any solution for this problem?
I use setTimeout with 1 second but it not a good idea!
resize() { setTimeout(() => { this.$refs.flickity.resize(); },1000); }
Use this.$refs.flickity.rerender(); instead of this.$refs.flickity.resize();
works for me ;)
@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?
@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
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