Nesting v-masonry-tile in v-masonry causing slowdown

[tb-b]

This is causing a significant slow down after several redraws (via router link for example). The issue seems to be in nesting v-masonry-tile inside of v-masonry like in docs:

<div v-masonry transition-duration="0.3s" item-selector=".item">
    <div v-masonry-tile class="item" v-for="(item, index) in blocks">
       <!-- block item markup -->
    </div>
</div>

Test scenario:

Array of 6 objects, setup as above

First run:

masonry.plugin.js outputs 6 elements (correctly)

Second run (redraw via router-link):

masonry.plugin.js outputs 18 elements (2 * 6 + 6)

Third run (redraw via router-link):

masonry.plugin.js outputs 42 elements (2 * 18 + 6)

---

As you can imagine this will clog your throughput pretty quickly, especially since every call is waits for imagesloaded.js to finish.

The easiest solution is to remove v-masonry-tile declaration from your HTML element, like this:

<div v-masonry transition-duration="0.3s" item-selector=".item">
    <div class="item" v-for="(item, index) in blocks">
       <!-- block item markup -->
    </div>
</div>

[shershen08]

that looks like a major issue! thanks for bringing it in @tombalev do you maybe have a simplified repo/app that one could clone to reproduce this issue ?

[tb-b]

not at the moment, but you can do something simple like vue-cli with vue-router, place vue-masonry grid on one page and then put console.log to vue-masonry masonry.plugin.js functions. This will get triggered on every router change X times.

Is there any significant use for that v-masonry-tile anyway? Seems to be working alright without it.

[Hadrien-DELAITRE]

Maybe related to https://github.com/shershen08/vue-masonry/pull/57