Fix: Accept ID as value to allow multiple instances

[benjamindedonder]

This fixes #59

new usage:

<div v-masonry="masonryId" transition-duration="0.3s" item-selector=".item">
  <div v-masonry-tile="masonryId" class="item" v-for="(item, index) in blocks">
    <!-- block item markup -->
  </div>
</div>

export default {
  data: () => ({
    masonryId: 'masonry-grid-1'
  })
}

this.$redrawVueMasonry('masonry-grid-1')

[shershen08]

Thanks for the input, I'll check that soon

[benjamindedonder]

No problem, thank you for bringing Masonry to Vue. :)

This fix is also possible using an attribute instead of taking the value from bindings. Depends on what you prefer.

[benjamindedonder]

If you need any help maintaining this project, I would love to do so.

[shershen08]

Thanks for your contribution @benjamindedonder

[kirkbushell]

Are we sure this works? I've defined the ID and tried to get it to work numerous times, all to no avail.

[kirkbushell]

In fact every time I define an ID, the library bugs out.

[benjamindedonder]

I mean to remember this was working for me. I have no idea about how you are using it of course, so I can't really help you out.

But I ended up simply using the Masonry library directly in my application which worked best for me. After all, this plugin simply wraps this library into a Vue Directive.

[fladens]

I had the same problem as @kirkbushell but after I looked into the code I saw that the id needs to be set on the v-masonry and the v-masonry-tile (so that events get send correctly). After adding it to both, everything worked as expected for me.

I think it would be good to add that to the README, right now it doesn't say it anywhere.