如何將動態VueJS組件添加到包裝？

Question

嗨，我遇到了包裝問題。

基於此解決方案https://codepen.io/Monocle/pen/ZbeBGL

我將每個網格項作為一個組件，然后在app.js（主文件）中根據給定的示例初始化包。

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

我現在想要處理打開/關閉組件，然后將它們拖放到draggabilly並綁定/取消綁定到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 ) );
});

問題是處理包裝對象的實例我猜。 它只是不工作。

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再次對其進行排序，因此它並不理想。 它實際上是一維基礎排序（如列表）。 所以它仍然沒有像我預期的那樣工作。 我需要保存所有網格項的（x，y）位置。

Additionaly Vue虛擬DOM和jquery DOM是不同的東西，它不能正常工作，我猜它是不常見的。

現在我正在為VueJS創建自己的網格布局。 並致力於最終的改變。 你可以在這里關注我： https ： //github.com/lrembacz/vue-responsive-grid-layout