vuetify v-bind 内联样式值不更新答案

【问题标题】：vuetify v-bind inline style value not updatingvuetify v-bind 内联样式值不更新
【发布时间】：2019-06-05 23:29:51
【问题描述】：

我有一个棘手的布局，我认为它只能使用 JavaScript 进行响应，但我无法通过绑定数据获得内联样式来完成此操作。图像周围有一个包装元素，我想成为图像的高度加上80px。为简洁起见，我将只发布我需要一起工作的两个元素，并删除多余的标记，因为它无关紧要。

<v-flex v-resize="onResize" v-bind:style="{height: this.imageHeight}" xs12 md6>
  {{this.imageHeight}}
  <img src="../assets/images/image1.jpg" alt="image" ref="desktop-image">
</v-flex>

在数据中，我首先将imageHeight 定义为0，目的是在页面加载或屏幕大小调整后更新该值。

data () {
  return {
    imageHeight : 0
  }
}

然后在mounted() 中，我将imageHeight 数据重新定义为我想要的高度。

this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80;

我也在 resize 方法中包含了这个。

 onResize () {
    this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80;
  }

一旦页面加载或调整屏幕大小，我在图像上方输出的{{this.imageHeight}} 值会正确更新，但它永远不会在图像元素上的v-bind:style 中更新，因此高度保持在0px .

如何像在其他地方一样更新内联样式数据？

【问题讨论】：

标签： javascript css vue.js data-binding vuetify.js

【解决方案1】：

height CSS 属性必须是：

具有长度单位的<length> 值（对于非零值）；例如，200px

或：

<percentage> 值；例如，100%

number 值无效。该值是字符串的形式，因此您的代码应将'px' 附加到计算出的数字：

this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80 + 'px';

demo

【讨论】：