ElemeFE / vue-infinite-scroll

An infinite scroll directive for vue.js.
2.86k stars 416 forks source link

How use it via .filter()? #118

Open etterwin opened 5 years ago

etterwin commented 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();
    }
}
MooseTheCoder commented 5 years ago

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