having difficulty with gutter

In my wrapping div:

<div class="grid" gutter="10" v-masonry transition-duration="0.5s" item-selector=".card"> <card class='card'...></card> </div>

I’m getting this warning:

[Vue warn]: Error in directive masonry inserted hook: “SyntaxError: Failed to execute ‘querySelector’ on ‘Element’: ‘10’ is not a valid selector.”

proto._getMeasurement = function( measurement, size ) {
  var option = this.options[ measurement ];
  var elem;
  if ( !option ) {
    // default to 0
    this[ measurement ] = 0;
  } else {
    // use option as an element
    if ( typeof option == 'string' ) {
      elem = this.element.querySelector( option );
    } else if ( option instanceof HTMLElement ) {
      elem = option;
    }
    // use size of element, if element
    this[ measurement ] = elem ? getSize( elem )[ size ] : option;
  }
};

Looking at the masonry code, it seems like it’s interpreting the 10 as a string and it needs to interpret as an integer. I’ve tried all forms of passing in the gutter attribute: gutter=10 :gutter=“10” :gutter=10

No dice.
Any thoughts? I’m using Vue 2.3.4.

[shershen08]

@ChefQuix here’s the demo i’ve made up with gutter property - https://jsfiddle.net/d4967v9o/20/ You’re right the current version supports gutter property ONLY via stating the DOM node selector, not pasting the Integer number. css:

.gutter-item {
   width:150px;
}

html:

<div v-masonry ...
   <div class="gutter-item"></div>
   <div v-masonry-tile ...
   <div v-masonry-tile ...
   ...
</div>

I’ll update the docs.

[shershen08]

@ChefQuix yes I see the problem. I’ll check details and update you ASAP