Невозможно добавить данные в мой компонент vuejs

Question

У меня есть div с некоторыми данными из 20 записей, которые я настроил, прокрутите больше данных, все работает нормально, кроме данных, добавляемых в этот div.

<script>
    methods: {
        loadMoreTimeline: function (event){
                let uri = route('contact.get.timeline', {
                listuid: this.listuid,
                subscriberuid: this.subscriberuid
            });

            axios.get(uri+"?offset"+offset).then(resp => {
                console.log('Timeline response: ', resp);

                if(resp.length == 0)
                    return false;


                this.data.push(this.resp);
            });
        },
        handleScroll: function (event){
          var currentScrollPosition = event.srcElement.scrollTop;
            if (currentScrollPosition > this.scrollPosition) {
                if((currentScrollPosition+800) >= event.srcElement.scrollHeight && loading == 0){
                    loading = 1;
                    // event.srcElement.append();
                    this.loadMoreTimeline();
                    console.log('Load More');
                }

            }
            this.scrollPosition = currentScrollPosition; 
        },
        created: function () {
            window.addEventListener('scroll', this.handleScroll);
        },
        destroyed: function () {
            window.removeEventListener('scroll', this.handleScroll);
        }

}

мой компонент:

<div class="events-holder" @scroll="handleScroll">
                <div class="timeline-event animated fadeInDown" :class="[isActive(item), item.type]" v-for="item in data"
                    :key="item.id" @click="setActive(item)" v-if="item.type">
                    <!-- more code -->
</div>
</div>

Все, что работает с идеальной выборкой данных при прокрутке и т. Д., Только выдает вопрос, как добавить эти данные в мой div

Answer 1

В Vue или других средах SPA вам не нужно (и не следует пытаться) вручную добавлять любую информацию в DOM;все это делается путем манипулирования данными компонента и предоставления возможности платформе обновлять страницу.

Вы не показали полный компонент с его начальными данными, поэтому я могу быть здесь, но похоже,в loadMoreTimeline() вы обрабатываете блок данных компонента как отдельный массив, нажимая непосредственно на него:

 this.data.push(this.resp);

Но вместо этого v-for в шаблоне выполняет итерацию по массиву с именем data внутри блока данных компонента:

 v-for="item in data"

... что означает, что строка в loadMoreTimeline() должна быть на самом деле this.data.data.push(this.resp).(Что бы сработало, но вам, вероятно, следует выбрать менее запутанное имя для этого массива; возможно, this.data.items и v-for="item in items".)

Как только вы отправите новую информацию в правильный массив, онаjust Just - push() - это один из методов мутации, который Vue включает в наблюдатели , поэтому не нужно использовать Vue.set или vm.$set, чтобы новые данные реагировали.