redrawVueMasonry and imageLoaded Dependency Issues in 0.10.11

[pingshunhuangalex]

After accidentally upgrading it to 0.10.11, I noticed that this.$redrawVueMasonry() will trigger the below error in browser's console;

Uncaught TypeError: _vue2.default.redrawVueMasonry is not a function

I assume this has something to do with the latest merge here #29

Meanwhile, now Vue-masonry also seems to require imageLoaded as a dependency. Some explanation would be nice here. I would recommend some kind of testing before releasing a new version cuz for vue-masonry it either works or just breaks the whole website which is rather painful. Thanks.

[shershen08]

Hello @pingshunhuangalex thanks for your message -

imageLoaded was a dependency for quite a while already. So I don't see Hi that could break things.

I am using the test repo I've referred in previous issue to check the functionality before releasing new versions. But I would agree to have more integration tests (w different versions / setups) would be a safe measure to not to break things in user's projects

[faahren]

Hi,
I have the same problem, it looks like it it indeed due to the ImageLoaded Instance in the masonryTile directive. I fixed it by removing it in your code.
`
Vue.directive('masonryTile', {

inserted: function inserted(el) {
  Events.$emit(EVENT_ADD, {
    'element': el
  });

  new _imagesloaded2.default(el, function () {
    Events.$emit(EVENT_IMAGE_LOADED, {
      'element': el
    });
  });
},
beforeDestroy: function beforeDestroy(el) {
  Events.$emit(EVENT_REMOVE, {
    'element': el
  });
}

});`

became
`
Vue.directive('masonryTile', {

inserted: function inserted(el) {
  Events.$emit(EVENT_ADD, {
    'element': el
  });
},
beforeDestroy: function beforeDestroy(el) {
  Events.$emit(EVENT_REMOVE, {
    'element': el
  });
}

});`

I also thing the beforeDestroy hook in the custom directive is not working. I have to retrigger the redrawVueMasonry function after each v-masonry-tile is detroyed. In the vuejs doc, i can't find any info on such a hook. I tried with update/componentUpdated but it does not seem to work either...

Cheers,
Guillaume

PS: I quick fixed it for me modifying vueMasonry.js on my side. Can I do something to have a properly built dist ? Ty

[shershen08]

I intend to add a check for imageLoaded asap today.

[faahren]

I still had a prob so I rolled back to 0.10.9 atm.

Thanks for the good work.

Cheers
G

[shershen08]

direct calling Vue.redrawVueMasonry() after #29 is not working
now that should be done in following way:

//...
methods: {
  myMethod: function(){
    this.$redrawVueMasonry();

it's my miss that I didn't check that.
I'll update the docs and release a updated version tonight

see example here: https://laracasts.com/discuss/channels/vue/how-to-encapsulate-common-functionality-in-vuejs

[pingshunhuangalex]

Hi @shershen08
Just tested everything out. It's all good now.
I noticed there is a typo in the documentation below

It should be this.$redrawVueMasonry() instead of this.redrawVueMasonry()

Meanwhile, it'll be nice to have a proper commit message instead of the issue number as GitHub will automatically redirect it to this issue instead of going into the commit itself here

Thanks for the fix and keep up the good work.

[shershen08]

Updated a library to 0.10.12 - b55e457