如何将计算属性作为 Vue.js 中组件的样式属性值传递？

Question

我的组件的模板包含这个 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'。

Answer 1

我必须在内联样式中将一个单位附加到 columnWidth 值。

width: columnWidth + 'px' 成功了。