VueJ에서 요소 높이 보기

VueJ에서 요소 높이 보기s

VueJS에서 요소 높이에 워처를 설정하는 방법이 있습니까?

검색 결과 페이지에서 필터 부분을 수정하려고 합니다.그러나 결과가 바뀌면 필터를 찾아서 해제할 방법이 없습니다.

RizeObserver를 사용하여 Vue-Component에 통합할 수 있습니다.

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>

$ref로 높이를 얻을 수 있습니다.yourElement.client검색 결과가 데이터를 반환한 후의 높이입니다.이를 통해 높이를 데이터 섹션의 일부로 설정하고 거기서부터 워처를 적용할 수 있습니다.이 예를 확인합니다.

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

언급URL : https://stackoverflow.com/questions/51743599/watch-height-of-an-element-in-vuejs