Vuejs 指令砌体检测数组前面并正确重绘

Question

我正在使用vue-masonry 插件，它可以让我轻松创建砌体网格。

我创建了一个无限加载的系统，您可以滚动到页面底部，并将新图片附加到与 vue-masonry 插件绑定的数组中。

当我创建一个轮询其他用户上传的新图片的系统时，出现了问题。这些新图片需要位于砌体网格的顶部。

该插件使用两个 Vue 指令masonry（父）和masonryTile（元素）。masonryTile有一个 v-for 循环遍历与我的 Vue 实例绑定的数组（它完成所有繁重的工作，预加载，清理等......）。

指令中有没有办法知道附加或前置的内容之间的差异？并尝试做出不同的反应（我知道砌体有一些追加/前置方法），但是在这里和使用这个插件，已经添加的项目（在开始时，所以前置可以与Vue一起使用），但没有砌体交互，也没有重绘（我尝试过）使用原型来触发重绘this.$redrawVueMasonry();）。

所以我不知道下一步该做什么。继续寻找一种方法来区分前置和附加并尝试将其绑定到各自的砌体方法？或者还有一个我没想到的方法...

预先感谢您的帮助

Ps：我认为我的代码并不真正相关，因为它更多的是优化插件的一种方法。如果您想要我的代码的某些特定部分，请在评论中告诉我！

Answer 1

这可能有点太晚了，这是一个 10 个月前的问题。然而，vue-masonry能够处理项目在数组中任意位置拼接的情况。但要正确更新网格this.$redrawVueMasonry()应该在this.$nextTick()内部调用，如下所示：

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

希望这对其他人有所帮助，即使不是原始海报。