如何将动态 VueJS 组件添加到包装中?

Question

嗨，我在包装方面遇到了问题。

基于此解决方案 https://codepen.io/Monocle/pen/ZbeBGL

我将每个网格项作为组件，然后在应用程序中.js(主文件(我根据给出的示例初始化包装。

var pckry = new Packery(container, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
});

我现在想处理打开/关闭组件，然后使它们拖拽并绑定/取消绑定到包装。但问题是我不能将packery作为vue对象的属性，而只是制作this.pckry.getShiftPosition(((基于示例：https://codepen.io/desandro/pen/PZrXVv(。

pckry.on( 'dragItemPositioned', function() {
// save drag positions
var positions = pckry.getShiftPositions( 'data-item-id' );
localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

我猜问题在于处理包装对象的实例。 它只是不起作用。

this.pckry.on( 'dragItemPositioned', function() {
// save drag positions
var positions = this.pckry.getShiftPositions( 'data-item-id' );
localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

实际上不起作用。当我把它做成

this.pckry = newPackery(...);

我该如何实际处理？

Answer 1

从我使用这个包装库开始，已经有很长时间了。每次向网格添加内容时，我都设法重新创建包装实例，但这并不理想，因为包装再次对其进行排序。它实际上是一维基础排序(如列表(。所以它仍然没有像我预期的那样工作。我需要为所有网格项保存我的 (x，y( 位置。

此外，Vue 虚拟 DOM 和 jquery DOM 是不同的东西，它无法正常工作，我猜用它来收集并不常见。

现在我正在为 VueJS 创建自己的网格布局。并致力于最终更改。你可以在这里关注我：https://github.com/lrembacz/vue-responsive-grid-layout