如何动态添加 Vue JS 组件到 packery？

Question

嗨，我遇到了包装问题。

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

我将每个网格项目作为一个组件，然后在 app.js（主文件）中我根据给定的示例初始化 packery。

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

我现在想处理 turn on/off 组件，然后将它们制作成 draggabilly 并 bind/unbind 到 packery。但问题是我不能将 packery 作为 vue 对象的属性，而只能制作 this.pckry.getShiftPositions() （基于示例：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 ) );
});

我猜问题出在处理 Packery 对象的实例上。它只是不工作。

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

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

Additionaly Vue Virtual DOM 和 jquery DOM 是不同的东西，它不能正常工作，我想一起使用它并不常见。

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

如何动态添加 Vue JS 组件到 packery？

How to add dynamiclly VueJS component to packery?

javascript

arrays

vue.js

vuejs2

packery