Как передать вычисляемое свойство в качестве значения свойства стиля для компонента в Vue.js?

Как передать вычисленное свойство как значение свойства стиля для компонента в Vue.js?

шаблон моего компонента содержит этот HTML-элемент

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

и я хотел бы установить его значение ширины, используя вычисляемое свойство.

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

Как мне добиться этого правильно?

Проблема, очевидно, заключается в части :style="{ width: columnWidth так как все работает идеально, когда я устанавливаю эту width:'20px' например, width:'20px' .

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector