How use it via .filter()?
etterwin opened this issue · 1 comments
etterwin commented
Hello! How to use the filter and this plugin at the same time? Filtering function trigger for downloaded content, i.e. for 15 elements. I need to display up to 15 matches after filtering. Please, help!
HTML
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="limit">
<table class="table">
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Rubric</td>
<td>Date of created</td>
<td>Date of changed</td>
<td>Remove</td>
</tr>
</thead>
<tbody v-if="posts && posts.length">
<tr v-for="post in filteredPosts">
<td>{{post.id}}</td>
<td>
<router-link
:to="{ name: 'affiche_posts', params: {id: post.id} }"
class="table-link">
{{post.name}}
</router-link>
</td>
<td>{{post.rubric}}</td>
<td>{{post.date_created}}</td>
<td>{{post.date_changes}}</td>
<td>
<span class="table-remove" @click="remove()">Remove</span>
</td>
</tr>
</tbody>
</table>
</div>
Vue
import axios from 'axios'
export default {
data: () => ({
posts: [],
search: '',
results: [],
busy: false,
limit: 15
}),
name: "Affiche",
methods: {
loadMore() {
this.busy = true;
axios.get("http://localhost:8080/data.json")
.then(response => {
const append = response.data.affiche_posts.slice(this.posts.length, this.posts.length + this.limit)
this.posts = this.posts.concat(append);
this.busy = false;
})
.catch((error) => {
this.busy = false;
})
}
},
computed: {
filteredPosts() {
return this.posts.filter(post => {
return post.name.toLowerCase().includes(this.search.toLowerCase())
})
}
},
created() {
this.loadMore();
}
}
MooseTheCoder commented
Howdy, this repo has been dead for some time, we pulled it from production due to the lack of updates. Another repo that should do the same thing : https://github.com/PeachScript/vue-infinite-loading