[英]How to pass a computed property as a style property value for a component in Vue.js?
The template of my component contains this html element:我的组件的模板包含这个 html 元素:
.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.问题显然出在
:style="{ width: columnWidth
部分,因为当我设置这个width:'20px'
时,每件事都完美无缺。
I had to append a unit to the columnWidth value in the inline style.我必须在内联样式中将一个单位附加到 columnWidth 值。
width: columnWidth + 'px'
did the trick. width: columnWidth + 'px'
成功了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.