DOM.getBoundingClientRect запускается не при событии прокрутки окна, а при изменении размера [Vuejs] - PullRequest
Новая
       15

DOM.getBoundingClientRect запускается не при событии прокрутки окна, а при изменении размера [Vuejs]

0 голосов
/ 11 октября 2018

CASE: Я делаю бесконечную прокрутку на веб-сайте, таблица, которая должна загружать больше строк, когда нижняя часть таблицы достигает нижней части области просмотра снаружи)

Код Для этого сначала я установил переменную windowHeight в данных, а в созданном lifehook сначала установил ее в window.innerheight и добавил в объект окна окно resize EventListener, чтобы установитьПеременная windowHeight для cuirrent window.innerheight, например: 

data() {
  return {
    windowHeight: 0,
  }
}

created() {
  this.windowHeight = window.innerHeight;
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}

, затем я установил переменную topRect и установил ее в topRect элемента div, который я поместил сразу после таблицы в шаблоне, поэтому, когдаtopRect этого элемента ниже, чем внутренняя высота окна, он должен запустить метод для загрузки большего количества данных, я сделал это так:

script 

data() {
  return {
    windowHeight: 0,
    topRect: 0,
    divAfterTable: '',
  }
}

created() {
  this.windowHeight = window.innerHeight;
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}

mounted() {
  this.divAfterTable = document.querySelector(#div-after-table)
  this.topRect = this.divAfterTable.getBoundingClientRect().top;
  window.addEventListener('scroll', this.setClientRect)
  })
}

methods: {
  setClientRects() {
    this.topRect = this.divAfterTable.getBoundingClientRect().top;
  }
}

шаблон 

<template>
  <div class="table">
    <div class="table__container">
      <table class="table__fixture">
        <thead>
          <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
          </tr>
        </thead>
        <tbody>
          <tr v-if="tableData.data" v-for="row in tableData" :key="row.id">
            <td>{{row.colOne}}</td>
            <td>{{row.colTwo}}</td>
            <td>{{row.colThree}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="div-after-table"></div>
  </div>
</template>

Остальной код для функции не имеет значения.

Ожидаемое поведение:

Метод setClientRect долженвключите прокрутку и обновите переменную topRect, но это не так, она просто срабатывает при изменении размера окна, странная часть заключается в том, что я поместил console.log («все работает») ВНУТРИ метода setClientRects следующим образом: 

methods: {
  setClientRects() {
    this.topRect = this.divAfterTable.getBoundingClientRect().top;
  }
}

и он регистрируется, но остальная часть метода просто не работает, если я не изменю размер окна

Странное поведение и, вероятно, полезные данные:

У меня есть средняя сложная структура компонентов в проекте, и я должен применить это к двум различным компонентам, странная вещь в том, что я отлично работаю с одним компонентом, но не с другим, случайявляется то, что компонент, где он не работает, отображается в представлении маршрутизатора, которое уже находится в другом представлении маршрутизатора (это дочерний маршрут), компонент имеет следующую структуру: 

<Root>
  <App>
    <Navbar>
    <News> router-view: /news <-- HERE IT WORKS

<Root>
  <App>
    <Navbar>
    <League> router-view: /league 
      <Statistics> router-view /league/statistics <-- HERE IT DOESN'T

, если вынужна дополнительная информация, дайте мне знать

1 Ответ

0 голосов
/ 11 октября 2018

Не все уверены, но я вижу, что вы используете document.querySelector, есть ли причина, по которой вы не используете: 

this.$el.querySelector

Вы также можете использовать Vue Refs конечно, но, возможно, я неправильно понял вашу проблему.

...