Как правильно подгружать данные из Axios?

Question

[VoRoN1999]

Всем привет.

Использую такую конструкцию:

getImageList: function () {
 axios
     get('https://picsum.photos/v2/list?', {
       params: {
         page: this.page++,
         limit: this.pageSize,
       }
     })
     .then(response => (this.info.push = response.data));
}

<div v-for="infos in info" :key="infos.id">
   <img :src="infos.download_url" width="600"><br><br>
</div>

При прокрутке страницы должны подгружаться данные, но старые картинки удаляются и заменяются на новые.
Получается, что их как было 5, так и остаётся 5, только они меняются.

Как решить эту проблему?

Answer 1

[Дима Паутов]

Это затирает прошлые данные на новые
this.info.push = response.data
Значит логично, что нужно не заменять массив, а добавлять в него новые элементы, т.е.

this.info.push.push(response.data)

Comments

[VoRoN1999]

Тогда цикл будет заново отрисовывать эти данные.
Есть подобие append, которое будет просто добавлять в этот div новые элементы?

[VoRoN1999]

Также данный способ вызывает ошибку: Uncaught (in promise) TypeError: t.info.push.push is not a function

[Eugene Chefranov]

VoRoN1999, если не работает push значит у вас там не массив

[VoRoN1999]

Eugene Chefranov,

data() {
            return {
                info: [],
                page: 3,
                pageSize: 5,
            };
        }

Приходит: https://picsum.photos/v2/list?page=3&limit=5

[Дима Паутов]

VoRoN1999, не будет цикл заново отрисовывать т.к. у вас ключи стоят. Vue умный, просто так перерисовывать он не будет

[VoRoN1999]

Дима Турков, Хорошо, тогда как быть с ошибкой?

[Дима Паутов]

VoRoN1999, ну если ошибка, то ваше свойство не является массивом
Замените на это
this.info.push(response.data)

[VoRoN1999]

Дима Турков, Ошибок нет, но он не отрисовывает данные.

[Дима Паутов]

VoRoN1999, быть того не может. Ну так ясен пень, ведь приходит массив с данными, ну и получается массив в массив вставляется.... Ну вы бы посмотрели что кладётся то!!! Я же не могу за всё отвечать в вашем коде.

Замените на это
this.info.concat(response.data)

[VoRoN1999]

Дима Турков, ха-ха. Но с concat ничего не изменилось.

[Дима Паутов]

VoRoN1999, что-то вы меня обманываете и я чего-то не знаю у вас, не может такого быть. Выводите переменную в консоль и смотрите, что пришло и каким стал исходный массив. Гадать мне не хочется

[VoRoN1999]

Дима Турков,

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Тестовый Vue + Laravel</div>
                    <div class="card-body">
                        <div v-for="info in infos" :key="info.id">
                            <img :src="info.download_url" width="200"><br><br>
                        </div>
                        <scroll-loader :loader-method="getImageList">
                        </scroll-loader>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                infos: [],
                page: 3,
                pageSize: 5,
            };
        },
        methods: {
            getImageList: function () {
               axios
                   .get('https://picsum.photos/v2/list?', {
                       params: {
                           page: this.page++,
                           limit: this.pageSize,
                       }
                   })
                   .then(response => (this.infos.concat(response.data)));
           },
        },
    }
</script>

[Eugene Chefranov]

VoRoN1999, выведите ответ API в консоль, чтобы увидеть что приходит на данный момент

[VoRoN1999]

Eugene Chefranov,

[Дима Паутов]

VoRoN1999, this.infos.push(...response.data)
Попутал я немного

[VoRoN1999]

Дима Турков, Большое спасибо!

[Дима Паутов]

VoRoN1999, да не за что))

[Дима Паутов]

VoRoN1999, насчёт this.infos.concat(response.data)
нужно так написать
this.infos = this.infos.concat(response.data)

Ведь concat возвращает новый массив, я запарил что-то

[VegasChickiChicki]

Дима Турков, В чем суть трех точек?

this.info.push(response.data)
//or
this.info.push(...response.data)

[Дима Паутов]

VegasChickiChicki, response.data - это массив, от чего ты будешь пушить в массив новый массив, а не содержимое нового массива.