Vue blank

by yuriy636

HTML

<body>
  <div id="app">
    Has scrolled over el-main? <strong>{{ hasScrolled }}</strong>
    <el-main @scroll.native="infiniteScroll"/>
    asuifsfsdfds
  </div>
</body>

CSS

.el-main {
  background: lightgreen;
  height: 200px;
  overflow: scroll;
}

JavaScript

Vue.component('el-main', {
	template: `
  	<div class="el-main">
    scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
    </div>
  `
});

var app = new Vue({
  el: '#app',
  data: {
    hasScrolled: false,
  },
  methods: {
  	infiniteScroll() {
    	this.hasScrolled = true;
    }
  }
})