滚动加载数据, 数据变化了但未渲染到页面上

Question

刚接触vue,在做异步加载数据时候
初次获取的数据长度为3
滚动加载时获取到另外的数据,加上之前的数据长度一共未4
滚动完成后页面上还是初次获取到的数据 只有3条
为什么新获取的数据没有渲染上去呢,
请教下各位大神以下哪里有写错呢?

<template>
    <div>
        <div id="colorlib-container">
            <div class="container">
                <div class="row row-pb-md" v-for="item in list">
                    <div v-for="value in item" v-bind:class="'col-md-' + value.space">
                        <!-- ./ content -->
                        <div class="blog-entry" v-if="value.hasImg == 1">
                            <!-- ./ img preview -->
                            <div class="blog-img" v-if="value.imgTab == 0">
                                <a href="blog.html">
                                    <img v-bind:src="value.images[0]" class="img-responsive" alt="">
                                </a>
                            </div>
                            <div class="blog-slider" v-if="value.imgTab == 1">
                                <div class="owl-carousel">
                                    <div class="item" v-for="path in value.images">
                                        <a href="blog.html" class="image-popup-link">
                                            <img v-bind:src="path" class="img-responsive" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- ./ img preview end -->
                            <div class="desc">
                                <p class="meta">
                                    <span class="cat"><a href="javascript:;">Cate</a></span>
                                    <span class="date">{{value.create_date}}</span>
                                    <span class="pos" v-if="value.author">By <a href="javascript:;">{{value.author}}</a></span>
                                </p>
                                <h2><a href="blog.html">{{value.name}}</a></h2>
                                <p>{{value.brief}}</p>
                            </div>
                        </div>

                        <div class="blog-entry" v-if="value.hasImg == 0">
                            <div class="desc">
                                <p class="meta">
                                    <span class="cat"><a href="javascript:;">Cate</a></span>
                                    <span class="date">{{value.create_date}}</span>
                                    <span class="pos" v-if="value.author">By <a href="javascript:;">{{value.author}}</a></span>
                                </p>
                                <h2><a href="blog.html">{{value.name}}</a></h2>
                                <p>{{value.brief}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <div class="load">滚动加载更多</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Site from "../../static/utils/stuff/js/main.js"
    export default {
        name: 'Home',
        data () {
            return {
                responseCount: 0,
                list: {0: []},
                page: 1,
                loading: false
            }
        },
        created: function () {
            this.data();
        },
        methods: {
            data () {
                var thisS = this;
                thisS.loading = true;
                thisS.$F.Response({
                    url: "index?page=" + thisS.page,
                    type: "post",
                    error: function (error) {
                        console.log(error)
                        if (thisS.responseCount > 4) {
                            return false;
                        }

                        setTimeout(function () {
                            thisS.responseCount += 1;
                            thisS.data();
                        }, 1000)
                    },
                    success: function (res, param) {
                        thisS.doShuffle(res.list);
                    }
                })
            },
            doShuffle (res) {
                var
                    thisS = this,
                    rl = this.$F.Keys(res).length
                ;
                if (!res || rl <= 0) {
                    return {};
                }

                var
                    i = 0,
                    m = (thisS.$F.Keys(thisS.list).length || 1) - 1,
                    n = m + 1
                ;
                
                if (m > 0) {
                    // 补全
                    if (thisS.list[m - 1].length == 1) {
                        thisS.list[m - 1].push(thisS.valRender(res[0]));
                        thisS.list[m - 1].push(thisS.valRender(res[1]));
                        res[0] = null;
                        res[1] = null;
                    } else if (thisS.list[m - 1].length == 2) {
                        thisS.list[m - 1].push(thisS.valRender(res[1]));
                        res[1] = null;
                    }
                }

                var kk = m ? n : m;
                thisS.list[kk] = [];
                res.forEach(function (value, index) {
                    if (!value) {
                        return
                    }

                    if (i > 2) {
                        i = 0;
                        kk++;
                        thisS.list[kk] = [];
                    }

                    thisS.list[kk].push(thisS.valRender(value));
                    i++;
                });

                // 初始化
                thisS.page++;
                thisS.loading = false;
            },
            //
            valRender: function (value) {
                // 图片banner 切换
                value.imgTab = 0;
                // 占位布局
                value.space = 4;
                // 是否有图片
                value.hasImg = 1;
                // 创建时间
                value.create_date = moment(value.create_date).format('LL');

                if (this.$F.Keys(value.images).length > 1) {
                    value.imgTab = 1;
                } else if (this.$F.Keys(value.images).length < 1) {
                    value.hasImg = 0;
                }

                return value;
            },
            loadMore (e) {
                this.data();
            },
        },
        mounted: function () {
            Site();
        }
    }
</script>

Answer 1

你的list类型是对象 对象的扩展vue是没法监听的 你应该用this.$set()

Answer 2

https://cn.vuejs.org/v2/guide...