How to pass a computed property as a style property value for a component in Vue.js?

Question

The template of my component contains this html element:

.grid-item(:style="{ width: columnWidth, backgroundColor: 'blue' }")

and I'd like to set its width value using a computed property:

computed: {
  columnWidth () {
    return ((this.maxWidth - ( this.marginWidth * 2)) - ((this.columnsCount - 1) * this.gutterWidth)) / this.columnsCount;
  }
}

How can I achieve this in a correct manner?

The problem is obviously in the :style="{ width: columnWidth part since every thing works perfectly when I set this width:'20px' for example.

Answer 1

I had to append a unit to the columnWidth value in the inline style.

width: columnWidth + 'px' did the trick.