[SOLVED] How to add dynamiclly VueJS component to packery?

How to add dynamiclly VueJS component to packery?

Hi I got a problem with packery.

Based on this solution https://codepen.io/Monocle/pen/ZbeBGL

I have every grid-item as a component and then in app.js (main file) im initializing packery based on example given.

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

I want now to handle turn on/off components and then making them draggabilly and bind/unbind to packery. But the problem is I cant make packery as an attrbute of vue object and just make this.pckry.getShiftPositions() (based on example: 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 ) );
});

The problem is with handling instance of packery object I guess. its just not working.

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

Doesnt actually work. When im making it as

this.pckry = newPackery(...);

How can I actually handle that?

Solution

From the time I was using this packery library, it has been a long time. I managed to recreate packery instance everytime I added something to grid, but it's not ideal since packery was sorting it again. It's actually one dimension base sorting (like a list). So it still not working as I expected. I needed to save my (x,y) position for all grid items.

Additionaly Vue Virtual DOM and jquery DOM is something different and It can't work properly and It's not common to use it togather I guess.

For now I'm creating my own grid layout for VueJS. And working on final changes. You can follow me in here: https://github.com/lrembacz/vue-responsive-grid-layout