Manually calling the reCalculate() function

[robinscholz]

Is there a way to manually call the reCalculate() function? I'm trying to recalculate the column amount in a component based on the amount of images. Since the same component is used for different routes I need to somehow recalculate the columns on RouteBeforeUpdate().

Any way this is possible?

[drosendo]

Hi,

I also want to know how to achieve this @paulcollett

I have 2 cols and elements are added dynamically but when ajax finnish if it returns false the element get removed. I need to recalculate so that I dont end up with more elements on one side

Cheers, David

[paulcollett]

I'm of the understanding you can access the methods via a reference:

<masonry ref="my-masonry"></masonry>

In your app / parent component:

if(this.$refs['my-masonry']) {
   this.$refs['my-masonry'].reCalculate();
}

This is untested so I would like to know if this is a quick solution! Otherwise, I'll look at other ways of exposing this.

[cybercode]

seems to work for me, i needed to wrap in a $nextTick() to "see" the update in the same method.

[checkthemethod]

@paulcollett works for me and I needed to wrap it in a $nextTick() as well. Thanks @cybercode for the tip

[paulcollett]

Just to note the plugin from version 1.0.2 now automatically updates on child item & prop changes

[nexorianus]

won't work for me. having <masonry ref="masonry" :cols="masonryCols">...</masonry> and

  get masonryCols() {// computed{masonryCols() {...}}
    return (this.view === 'masonry') ? { default: 3, 900: 2, 400: 1 } : 1;
  }

Also tried using this.$nextTick(() => {(this.$refs.masonry as any).reCalculate();}); on this.view change. It wont update.

[nexorianus]

simplest fix for me was to add the key attribute to the -Tag

<masonry
            :key="view"
            ref="masonry"
            :cols="masonryCols"
            :gutter="{default: '2rem'}"
            >

So when the view variable changes it forces a re-render of the masonry component