小编Sam*_*mmi的帖子

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

我正在构建一个纵横比计算器。 如果我有 4 个相互依赖的变量，如何避免无限循环？

我必须设置 4 个观察者，每个数据元素一个。

watch: {
widthRatio(value) {
  this.pxWidth = (value * this.pxHeight) / this.heightRatio;
},
heightRatio(value) {
  this.pxHeight = (value * this.pxWidth) / this.widthRatio;
},
pxWidth(value) {
  //sets heightRatio and widthRatio
},
pxHeight(value) {
  //sets heightRatio and widthRatio
}

我希望用户能够更改比率，这些更改应该反映在像素上并更新它们。当然，他也可以选择更改像素，这反映在比率上。