How can i add new items to the grid in Vue?

[Jacks349]

First of all, i'm amazed at how smooth and easy to use is Muuri! I'm trying to use it with Vue, i simply added the library to my project without using any Vue-wrapper, and everything seems to work except that i can't find a way to add items to a grid dynamically (for example on a button hit).

The problem with my code is that the items every new item will overlap on the older one, instead of being added to the grid. In order to add items i'm using a loop. What am i missing here?

<div class="grid" style="background-color: white">     
    <div class="item" v-for="item in items" :key="item.index">
      <div class="item-content">
        <!-- Safe zone, enter your custom markup -->
        <h1 style="color: white">{{item.index}}</h1>
        <!-- Safe zone ends -->
      </div>
    </div>
</div>

I'm sure other devs are using Murri with dev. How are you doing this?

I created a sandbox too for this issue: https://codesandbox.io/s/tender-pine-sj8dc?file=/src/App.vue

[niklasramo]

You need to call grid.add(elements) when/after adding new DOM elements to the grid, and also grid.remove(items) just before removing the elements from the grid.

[Jacks349]

Thank you a lot!