vue-infinite-loading라이브러리로 화면에 요소가 노출될 때마다 이벤트 처리

나열되어 있는 뉴스 리스트들이 사용자에게 하나 하나 보여질 때마다 사용자에게 그 리스트가 노출되었음을 알기 위해 각 리스트 데이터가 가지고 있는 URL로 API를 호출해야하는 상황.

Vue-infinite-loading 라이브러리

import InfiniteLoading from 'vue-infinite-loading'

<ul>
	<li v-for="(item, index) in LIST" :key="index">
    	<InfiniteLoading @infinite="노출됐다고알리는함수(index)" />
    </li>
</ul>

노출됐다고알리는함수(index) {
	...
	axios.get(URL이 저장되어 있는 배열[index])
    ...
}

리스트를 불러올 때마가 각 각의 리스트 데이터가 가지고 있는 API URL을 배열에 저장하고 노출됐다고알리는함수로 URL들이 저장된 배열과 리스트의 index로 노출된 리스트마다 API를 호출