如何将计算属性作为 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' 成功了。