Skip to content

How use it via .filter()? #118

Open
Open
@etterwin

Description

@etterwin

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();
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions