Description
Version 2.2.0
Vue.js version 2.4.2
What is expected?
I have a news viewer component that has 2 tabs, one for latest articles and one for tweets.
Ideally I'd like to use the infinite-loading for both tabs, but when I tried scrolling was detected on both instances since the tab content exists on the same page, so I opted to just use it on the tweets tab since there is far more content.
What is actually happening?
When the tweets tab is not active the infinite scroll component just massively loads over and over. No loaded state is ever triggered. If I set the tweets tab to active on page load, I get proper loading initially, but once I change tabs ... massive loading again.
How to reproduce this problem?
My code looks like so:
<template>
<div class="card-content" id="twitter-feeds">
<ul class="twitter-feed">
<li v-for="tweet, i in tweets">
<div class="tweet grey lighten-3 z-depth-1">
<img :src="tweet.image" class="responsive-img circle z-depth-4 left">
<p class="title" v-html="tweet.username"></p>
<p class="summary" v-html="tweet.content"></p>
<div class="sources">
<span class="source date">Source: <a :href="tweet.link" target="_blank">{{ tweet.tweet_id }}</a></span>
<span class="posted date">Posted: {{ tweet.posted_at }}</span>
</div>
</div>
</li>
<infinite-loading @infinite="infiniteHandler"></infinite-loading>
</ul>
</div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';
export default {
name: 'TwitterLinks',
components: {
InfiniteLoading
},
data () {
return {
tweets: [],
page: 1
};
},
methods: {
infiniteHandler($state) {
axios.get('/news/tweets', {
params: {
page: this.page,
},
}).then((response) => {
if (response.data.data.length) {
this.tweets = this.tweets.concat(response.data.data);
$state.loaded();
if (this.page == response.data.last_page) {
$state.complete();
} else {
this.page = response.data.current_page + 1;
}
} else {
$state.complete();
}
});
}
}
};
</script>I'm using Laravel 5.4 as my API which returns a LengthAwarePaginator so I have access to current_page, last_page etc.
I tried the infinite-wrapper approach which caused the component to either fail completely, or constantly load as always, no change basically.
Thanks