在 VueJS 中观察元素的高度答案

【问题标题】：Watch height of an element in VueJS在 VueJS 中观察元素的高度
【发布时间】：2019-01-15 12:52:43
【问题描述】：

有没有办法在 VueJS 中设置一个元素高度的观察者？

我正在尝试修复搜索结果页面上的过滤器部分。但如果结果发生变化，则无法找到它并取消修复过滤器。

【问题讨论】：

标签： javascript dom vue.js vuejs2 vue-component

【解决方案1】：

您可以使用 ResizeObserver 并将其集成到您的 Vue 组件中

function observeHeight() {
  const resizeObserver = new ResizeObserver(function() {
     console.log("Size changed");
  });

 resizeObserver.observe(document.getElementById('yourId'));
}

function changeHeight() {
  var elem = document.getElementById('yourId');
  
  console.log('...loading data...')
  setTimeout(function(){ 
    elem.style = "height: 200px";
  }, 3000);
  
}

observeHeight();
changeHeight();

#yourId {
  background-color: beige;
  height: 100px;
}

<div id="yourId">
  
</div>

【讨论】：

【解决方案2】：

在搜索结果返回数据后，您可以通过 $ref.yourElement.clientHeight 获取高度。有了它，您可以将高度设置为 data{} 部分的一部分，然后从那里应用一个观察者。检查this example

new Vue({
  el: '#app',
  data: {
    height: 0
  },
  methods: {
    calculateHeight() {
      this.height = this.$refs.app.clientHeight;
    }
  }
});

【讨论】：

另外，你可以通过调用 this.$el.clientHeight 来获取元素
从响应数据中加载的图像呢？他们将改变元素的高度。之后，您必须再次重新运行此功能。但是你什么时候知道图片的加载已经完成了？
不适用于以下内容：jsfiddle.net/kja5rsuv