вызов события onscroll элемента внутри созданной функции

Question

Я пытаюсь прослушать событие прокрутки внутри определенного элемента, но, похоже, оно не работает внутри созданной функции, ниже моя попытка, а вот скрипка https://jsfiddle.net/mejuliver/8hxrt9eq/18/ попытка откомментироватьсобытие прокрутки вне экземпляра vue, и вы узнаете

new Vue({
  el : '#vueapp',
  data : {
    showSearchBar : 0
  },
  created(){
    const _self = this;

    document.querySelector('#app').onscroll = function() {

    alert();

        if(document.querySelector('#app').scrollTop >= 10) {
            _self.showSearchBar = 1;
        }else{
            _self.showSearchBar = 0;
        }
    }
    // --
  }
});

любую помощь, идеи, пожалуйста?

Answer 1

Хотя перемещение обработчика событий на mounted (как это было предложено Совалиной в комментариях) работает, это не Vue способ сделать это.

В Vue вместо этого вы должны встроить информацию об обработчике событий в html-шаблон:

(основываясь на коде, который вы разместили на jsfiddle)

<div id="vueapp">
    <div id="app" @scroll="handleScroll">
    </div>
</div>

JavaScript:

new Vue({
    el : '#vueapp',
    data : {
        showSearchBar : 0
    },
    methods: {
        handleScroll(evt) {
            if(evt.target.scrollTop >= 10) {
                this.showSearchBar = 1;
            }else{
                this.showSearchBar = 0;
            }
        }
    },
});