Question

我的div包含20条记录的数据，我设置了onscroll更多数据，但除该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"。）

将新信息推送到正确的数组后，它应该可以正常工作-push()是Vue wraps in observers的一种变异方法-因此，不必使用Vue.set或vm.$set来使新数据具有反应性。

无法将数据追加到我的组件vuejs中

1 个答案: