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

Question

我有一个棘手的布局，我认为它只能响应 JavaScript，但我无法通过绑定(bind)数据获得内联样式来完成此操作。图像周围有一个包装器元素，我希望它是图像的高度加上 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;

我还将其包含在调整大小方法中。

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

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

我怎样才能像在其他地方一样更新内联样式数据？

Answer 1

height CSS 属性必须是:

• 一个 <length> 具有长度单位的值(对于非零值)；例如，200px

或:

• 一个 <percentage> 值(value);例如，100%

A number值无效。该值采用字符串形式，因此您的代码应附加 'px'到计算的数字:

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

demo