Open etterwin opened 5 years ago
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(); } }
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
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
Vue