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

admin管理员组

文章数量:1366902

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

Share Improve this question Follow edited Oct 28, 2019 at 15:41 Shaya Ulman 1,67111 gold badge1717 silver badges3030 bronze badges asked Jan 5, 2018 at 19:28 SammiSammi 28611 gold badge44 silver badges1111 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

width: columnWidth + 'px' did the trick.

本文标签： javascriptHow to pass a computed property as a style property value for a component in VuejsStack Overflow