Как отследить изменение offsetTop во vue3?

Question

[Paul14]

Есть компонент Test который принимает пропс position = {top: ... , left:...} в котором содержаться координаты для этого объекта. Объект Test передвигаться по экрану исходя из переданных значений в пропсе. Внутри него в я передаю div.

<Test :position="position">
      <div class="linePointer" ref="pointer">
  </Test>

Я хочу повесить слушатель события, который бы отслеживал изменение offsetTop у этого дива .linePointer. Как это сделать? Именно отследить изменение offsetTop или offsetLeft у html элемента.

if(this.$ref.pointer.offsetTop изменился){ console.log(this.$ref.pointer.offsetTop)}

// Не работает 
 <div class="linePointer" ref="pointer" v-on:update-offset-top="handleOffsetTopChange">


// Не работает 
mounted() {
    const pointerElement = ref(null);
    watchEffect(() => {
      if (pointerElement.value) {
        const { offsetTop } = pointerElement.value;
        // Обрабатываем изменение offsetTop
        console.log('Новое значение offsetTop:', offsetTop);
      }
    });
    // Связываем элемент с атрибутом ref="pointer" с реактивным свойством
    this.$refs.pointer = pointerElement;
  }


// Не работает 
watch:{
'this.$refs.pointer.offsetTop'(){
...
}
}

Comments

[Александр Васильев]

Не силен в vue
А какие ошибки в консоли? Что такое ref?
Почему в одном месте ref, а в другом refs?

[Vlad]

А не лучше ли тогда отслеживать изменения в самом props, и после каждого такого изменения вычислять интересующее Вас свойство? Нативного события на изменение offsetTop нету, так что в любом случае придется изобретать велосипед. Лучше, имхо, выбрать иной подход

[Paul14]

Vlad, В конечно счете я нашел самое лаконичное решение через пользовательскую директиву в которой я уже не помню, что сделал.