First, up to 10 list items are displayed (vue-infinite-scroll). If you enter the name of the element into the search (immediately after the page loads), then all matched elements will remain within the set limit, but the new ones will not be podgled to fill the limit (10 pieces).

How to synchronize the operation of filteredPosts() and loadMore()

HTML

 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="limit"> <table class="table"> <thead> <tr> <td>#</td> <td>Заголовок</td> <td>Рубрика</td> <td>Дата создания</td> <td>Дата последнего обновления</td> <td>Действия</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()">Удалить</span> </td> </tr> </tbody> </table> </div>

Js

 import axios from 'axios' export default { data: () => ({ posts: [], search: '', results: [], busy: false, limit: 10 }), 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(); } }

    0