-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not working on first render when using custom components with v-for #32
Comments
@freshlySqueezedBananas could you provide me with a codepen example? |
Same problem for me. Just don't have the time for a codepen sorry. But I used:
With destinations-list.vue
It doesn't work. The divs are not inside of the slider... |
hmmm maybe a scoped slot could solve this? Now that I know the issue I can attempt to fix :D Thanks! |
I've been looking into this issue - can't seem to find a fix. Any updates? UPDATE: It seems that setting lazy-load to true and using the "data-flickity-lazyload" as the default src option fixes this problem. |
As a fix I'd suggest wrapping the new Flickity call inside the init method in a this.$nextTick. Happy to make a PR if needed. |
Experiencing same issue here. @edtownend what do you mean by "flickity call", can you please elaborate? In the parent component I've tried doing:
But that doesn't always work. Wrapping |
I think the reason that's not working for you is that at the time the parent component is mounted, the child vue-flickity component won't be mounted yet. Instead I think it should be in the init() method on the actual component, eg.
I'm not actually using this component as I'd already written my own that does exactly the same thing, but that's working for me. |
Heres a quick workaround for future visitors; for the first render don't load your component until the array is populated and upon updating the array re-render the whole component via a v-if flag that's being toggled in the server call. Additionally wrapping vue's transition component around your component will actually make it behave sort of normal. |
Im having this problem too, I have my cells with a v-for and they load correctly, but the slider doesn't work until I change pages, the first load is just cells in top of other cells. Im triyng with v-if for the container, but I got the same result. Any ideas? |
Has anyone got a solution for this? EDIT: Found this And it works, although using |
|
Hi,
Similarly with @angelorc's issue when using a custom component with v-for, the slides are rendered outside flickity's viewport. Tried the solution @exxy provided to no avail.
This doesn't work
This works
The weird thing is, it only won't work on first render. If I return back to the page where the flickity slider is, it's rendered nicely. Same behaviour when using custom components inside the div on the 2nd method. On first render they will render weirdly, and when I return to that page. it's all rendered as intended.
The text was updated successfully, but these errors were encountered: