The template of my ponent contains this html element:

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

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

puted: {
  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.

The template of my ponent contains this html element:

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

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

puted: {
  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.

• javascript
• css
• vue.js

• 1 You probably need to append some units. – Roy J Commented Jan 5, 2018 at 19:35
• that's very likely! I'm looking up the correct syntax of doing this right now. – Sammi Commented Jan 5, 2018 at 19:41
• Thank you! It was in the official Vue documentation. – Sammi Commented Jan 5, 2018 at 19:45

1 Answer 1

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

width: columnWidth + 'px' did the trick.