Как правильно отрисовать список компонентов?

Question

[AleDv]

Всем привет. Есть список юзеров, которые первоначально отображаются. Потом, по кнопке получаю ещё партию юзеров для отбражения. Вновь прибывшиеданные пушу в основной массив:

<template>
    <div class="container">

            <div class="text-center" v-if="! this.isUserPrivate && this.isUserAllow && this.friendList">
                <div v-if="! this.isLoading">

                    <div class="row">
                        <friend-item :friend="friend" v-for="friend in this.friendList" :key="friend.id" track-by="id"></friend-item>
                    </div>
                </div>

                <div class="text-center" v-if="this.visibleBtn">
                    <span class="friends" @click="uploadPart">Загрузить ещё</span>
                </div>
            </div>

    </div>
</template>

<script>

    import FriendItem from "../components/FriendItem.vue";

    export default {
        name: "Friends",
        components: {
            FriendItem,
            VLink
        },
        data: function () {
            return {
			
                friendList: [],
                friendListCount: 0,
                friendsShow: 16,
                isLoading: false,

                page: 1,
                visibleBtn: true,
            }
        },
        created() {

            let _that = this;

            connect.subscribe((e) => {
                if (e.detail.hasOwnProperty('type')) {
                    switch (e.detail.type) {

                        case 'VKWebAppCallAPIMethodResult':

                            if (e.detail.data) {

                                _that.friendListCount = e.detail.data.response.count;

                                e.detail.data.response.items.forEach(function (item) {
                                    _that.friendList.push(item);
                                });

                                if (_that.friendListCount <= (_that.page) * _that.friendsShow) {
                                    _that.visibleBtn = false;
                                }

                                _that.isLoading = false;
                            }
                            break;

                      
                        case 'VKWebAppAccessTokenReceived':

						if (e.detail.data) {
                                localStorage.token = e.detail.data.access_token;
                                localStorage.token_scope = e.detail.data.scope;
                            }

                            if (localStorage.token_scope.indexOf('friends') !== -1) {
                                _that.isLoading = true;

                                connect.send("VKWebAppCallAPIMethod", {
                                        "method": "friends.get",
                                        "params": {
                                            "user_id": this.user.id,
                                            "count": _that.friendsShow,
                                            "offset": 0,
                                            "order": "hints",
                                            "fields": "photo_100, bdate",
                                            "v": "5.103",
                                            "access_token": localStorage.token
                                        }
                                    }
                                );
                            } else {
                                _that.isUserAllow = false;
                            }

                            break;

                    }
                }
            });
        },
        methods: {

            uploadPart() {

                let page = parseInt(this.page);
                let nextPage = page + 1;
                let partItemsCount = this.friendsShow;
                let offset = page * partItemsCount;

                this.isLoading = true;

                connect.send("VKWebAppCallAPIMethod", {
                        "method": "friends.get",
                        "params": {
                            "user_id": this.user.id,
                            "count": partItemsCount,
                            "offset": offset,
                            "order": "hints",
                            "fields": "photo_100, bdate",
                            "v": "5.103",
                            "access_token": localStorage.token
                        }
                    }
                );

                this.page = nextPage;

                return null;
            },
           
        }
    }
</script>

В итоге при отображении, когда приходит новая партия данных, весь список сначала удаляется, потом отрисовывается снова с уже дополненными данными. Получается такой скачок в отрисовке.

Как добиться добавления элементов в массив и его отрисовку без подобных скачков?

UPD. Обновил пример. Сначала выполняется событие VKWebAppAccessTokenReceived, потом при нажатии кнопка "загрузить ещё" обрабатывается событие VKWebAppCallAPIMethodResult

Comments

[origami1024]

Так ты только прибывшие пушиш или ты с нуля перепушиваешь?
Потому что по умолчанию обновляет только новые элементы, вот пример (введи в нижний инпут слово, затем перед нажатием add выдели какой-нибудь элемент, для проверки - при добавлении нового выделение не пропадет)
https://codepen.io/origami1024/pen/oNNQJpr

[origami1024]

того кода что ты привел не достаточно

[AleDv]

origami1024, обновил код

Answer 1

[Андрей Ололощенко]

Потому что при нажатии на кнопку вы выставляете this.isLoading = true; соответственно у вас весь код внутри перерисовывается.

Плюсом советую посмотреть в сторону ES6 синтаксиса

e.detail.data.response.items.forEach(function (item) {
                                    _that.friendList.push(item);
                                });

и использовать spread например и асинхронщину типа промисов или async\await

_that.friendList.push(...e.detail.data.response.items);

Comments

[AleDv]

Спасибо за ответ! Да, вы верно подметили про isLoading, я уже успел найти решение :)

Я больше в беке, js знаю не достаточно хорошо, поэтому код может выглядеть дико) почитаю про синтаксис, спасибо.