Как прослушать выбранные события прокрутки Vuejs? - PullRequest
Новая
       21

Как прослушать выбранные события прокрутки Vuejs?

0 голосов
/ 29 марта 2020

Я хочу прикрепить обработчик, который прослушивает, когда пользователь прокручивает список опций элемента select. Я попробовал два варианта: 

let app = new Vue({    
  data:{
    items:Array(1000).fill("lorem epsiom"),
    scrolled: "no scrolling",
  },
  methods: {
    created() {
      this.$refs.select.addEventListener("scroll", this.handleScroll);
    },
    destroyed() {
      this.$refs.select.removeEventListener("scroll", this.handleScroll);
    },
    handleScroll(e) {
      this.scrolled = "finally scrolled!"
      console.log(e);
    }
  }
}).$mount("#app");
select {
  height:40px;
  width:140px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>{{scrolled}}</p>
  <select @scroll="handleScroll" ref="select">
    <option v-for="x in items">{{x}}</option>
  </select>
</div>

Ни один из них не работал (а именно: использование @scroll или ручная регистрация обработчика с использованием addEventListener). Контекст: я пытаюсь добавить возможность infinite-scroll к моему элементу select, поэтому, прослушивая события прокрутки и основываясь на некоторых условиях, я буду загружать больше опций асинхронно.

Редактировать: Я добавил рабочий фрагмент того, что я пробовал.

...