CODEWITHSUNDEEP
vue.jsvuejs2prependvue-directives
dib258
dib258

Reputation: 715

Vuejs directive masonry detect prepend to array and redraw properly

I am using the vue-masonry plugin which let me create a masonry grid easily.

I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.

The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.

The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).

Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).

So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...

Thanks in advance for you help

Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !

Upvotes: 1

Views: 924

Answers (1)

Lowry
Lowry

Reputation: 448

This probably comes a bit too late, this being a 10 month old question. However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:

this.$nextTick(() => this.$redrawVueMasonry());

Hope this helps, if not the original poster, someone else.

Upvotes: 5

Related Questions