Javascript 从ajax请求动态连接Vue中的数组不起作用

我有一个相当简单的Vue实例，它从REST端点检索对象并将它们显示在页面上。几乎所有东西都正常工作（例如，过滤），除了我通过请求服务提供新的结果“页面”来向结果集添加新对象之外。此操作与我的其他操作之间的区别在于，我正在尝试将来自服务的新结果添加到现有结果集中。因为该服务只返回请求的结果“页面”，所以我不能完全替换该数组，而是必须添加到Vue实例中的现有结果集。下面是有问题的代码：

// these come from an external server-side process rendered in a separate place so are defined outside of the Vue context
let searchTags = ["tag1", "tag2", "etc"];
let productsBaseSearchTag = "a/b/c";

Vue.mixin({
    methods: {
        doSearchStuff: function(response, data) {
            this.searchResponse = response;
            this.resultCount = response.total; // this doesn't seem to be working consistently either so I'm doing it with jQuery
            jQuery(".search-page-sort-results .num").text(this.resultCount);
            if(this.currentPage > 1) {
                this.searchResults = this.searchResults.concat(data.hits);
            } else {
                this.searchResults = data.hits;
            }
            this.facetCount = data.facets.length;
        }
    }
});

new Vue({
    el: '#v-search-page-results',
    data: {
        searchResponse: {},
        searchResults: [],
        facetHeaders: searchTags,
        returnedFacetHeaders: undefined,
        currentPage: 1,
        hitsPerPage: 12,
        searchTerm: "",
        statusMessage: "",
        sortProperty: "",
        displayedFilters: {},
        predicateList: [],
        facetCount: 0,
        resultCount: 0,
        showLoading: true
    },
    created: function() {
        this.predicateList = searchTags;
        this.getSearchResults(false);
    },
    computed: {
        pdpPaths: function() {
            return this.searchResults.map(function(item) {
                let catalogPath = item.path;
                return decodeURIComponent(pdpPath) + catalogPath.replace(decodeURIComponent(catalogRoot), "").replace(/\//g, ".");
            });
        },
        summaries: function() {
            return this.searchResults.map(function(item) {
                let summary = item.properties.summary;
                if (summary.length >= 120) {
                    summary = summary.substring(0, 120);
                    summary = summary.substring(0, summary.lastIndexOf(" ")) + "...";
                }
                return summary;
            });
        },
        assetAbsoluteURLs: function() {
            return this.searchResults.map(function(item) {
                let escapedUrl = item.path.replace(/\s/g, "%20");
                return location.origin + escapedUrl;
            });
        },
        canClearFilters: function() {
            return this.predicateList !== searchTags;
        },
        moreResults: function() {
            if(this.searchResponse) {
                let resultCount = this.resultCount;
                let totalLoadedResults = this.hitsPerPage * this.currentPage;
                if(totalLoadedResults < resultCount) {
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        loadMoreResults: function() {
            this.currentPage += 1;
            this.getSearchResults();
        },
        clearSearchTerm: function() {
            this.searchTerm = "";
            this.submitSearchTerm();
        },
        getSearchFilters: function() {
            if(this.predicateList.length > 0) {
                return this.predicateList;
            } else {
                this.predicateList = searchTags;
                return this.predicateList;
            }
        },
        getSearchResults: function(xhrAsync=true) {
            let query = this.buildQuery();

            var jqXhr = $.ajax({
                url: query,
                async: xhrAsync, // search breaks if we don't set this to false on the initial page load search
                context: this
            });

            if(!this.returnedFacetHeaders) {
                jqXhr.done(function(response) {
                    let data = response;
                    this.doSearchStuff(response, data);

                    this.returnedFacetHeaders = data.facetHeaders;

                    if(queryParams.q) {
                        this.searchTerm = decodeURIComponent(queryParams.q);
                    }
                    if(queryParams.tags) {
                        this.predicateList = queryParams.tags;
                    }
                }).done(function () {
                    this.getSearchResults();
                });
            } else {
                jqXhr.done(function(response) {
                    let data = response;
                    this.doSearchStuff(response, data);
                });
            }
        },
        submitSearchTerm: function() {
            this.resetSearch();
        },
        resetSearch: function() {
            this.currentPage = 1;
            this.getSearchResults();
        },
        buildQuery: function() {
            let offset = (this.currentPage - 1) * this.hitsPerPage;

            query = "..."; // not relevant

            return query;
        }
    }
});

//它们来自在单独位置呈现的外部服务器端进程，因此在Vue上下文之外定义
让searchTags=[“tag1”、“tag2”、“etc”]；
让productsBaseSearchTag=“a/b/c”；
米辛({
方法：{
doSearchStuff：功能（响应、数据）{
this.searchResponse=响应；
this.resultCount=response.total；//这似乎也无法持续工作，因此我使用jQuery来执行此操作
jQuery（“.search page sort results.num”）.text（this.resultCount）；
如果（此.currentPage>1）{
this.searchResults=this.searchResults.concat（data.hits）；
}否则{
this.searchResults=data.hits；
}
this.facetCount=data.facets.length；
}
}
});
新Vue({
el:“#v-search-page-results”，
数据：{
searchResponse:{}，
搜索结果：[]，
FaceHeader:searchTags，
ReturnedFacetHeader:未定义，
当前页面：1，
命中率：12，
搜索词：“”，
状态消息：“”，
sortProperty:“”，
displayedFilters:{}，
谓词列表：[]，
FaceCount:0，
结果帐户：0，
显示加载：正确
},
已创建：函数（）{
this.predicateList=searchTags；
此.getSearchResults（false）；
},
计算：{
pdppath:function（）{
返回此.searchResults.map（函数（项）{
让catalogPath=item.path；
返回decodeURIComponent（pdpPath）+catalogPath.replace（decodeURIComponent（catalogRoot），“”）。replace（//\//g，“.”）；
});
},
摘要：功能（）{
返回此.searchResults.map（函数（项）{
让summary=item.properties.summary；
如果（summary.length>=120）{
summary=summary.substring（0，120）；
summary=summary.substring（0，summary.lastIndexOf（“”）+“…”；
}
返回摘要；
});
},
assetAbsoluteURLs:函数（）{
返回此.searchResults.map（函数（项）{
让escapedUrl=item.path.replace（/\s/g，“%20”）；
返回位置.origin+escapedUrl；
});
},
canClearFilters:函数（）{
返回this.predicateList！==searchTags；
},
更多结果：函数（）{
如果（此.searchResponse）{
让resultCount=this.resultCount；
让totalLoadedResults=this.hitsPerPage*this.currentPage；
if（totalLoadedResults0）{
返回此.predicateList；
}否则{
this.predicateList=searchTags；
返回此.predicateList；
}
},
getSearchResults:函数（xhrAsync=true）{
让query=this.buildQuery（）；
var jqXhr=$.ajax({
url:query，
async:xhrAsync，//如果在初始页面加载搜索中未将其设置为false，则搜索将中断
背景：这
});
如果（！this.returnedFaceHeaders）{
jqXhr.done（函数（响应）{
让数据=响应；
此.doSearchStuff（响应、数据）；
this.returnedFacetHeaders=data.facetHeaders；
if（queryParams.q）{
this.searchTerm=decodeURIComponent（queryParams.q）；
}
if（queryParams.tags）{
this.predicateList=queryParams.tags；
}
}).done（函数（）{
这是.getSearchResults（）；
});
}否则{
jqXhr.done（函数（响应）{
让数据=响应；
此.doSearchStuff（响应、数据）；
});
}
},
submitSearchTerm:函数（）{
这是resetSearch（）；
},
resetSearch:function（）{
this.currentPage=1；
这是.getSearchResults（）；
},
buildQuery:function（）{
设偏移量=（this.currentPage-1）*this.hitsPerPage；
query=“…”；//不相关
返回查询；
}
}
});

代码中的内容远不止这些，但这是与数组相关的部分。它不会在此块之外更新。下面是在数组中迭代的带有v-for的相应标记：

<div id="v-search-page-results" class="search-page-container _clearfix">
    <div class="search-page-wrapper">
        <div class="search-page-facets-wrapper">
            <div class="search-page-sort-results">
                <span v-cloak class="num">{{ resultCount }}</span> results
            </div>

        </div>

        <div class="search-page-container">

            <!-- facet stuff here -->

            <div class="search-page-results-container">
                <div class="search-page-results-wrapper">

                    <div v-for="(result, index) in searchResults" class="search-page-results-item" v-bind:key="result.id">
                        <div class="search-page-image-container">
                            <img v-cloak :alt="result.title" :src="result.properties.thumbnailPath" class="search-page-image">
                        </div>
                        <div class="search-page-results-content">
                            <a v-cloak :href="pdpPaths[index] + '.html'" class="title" title="">{{ result.properties.productTitle }}</a>
                            <div v-cloak class="description" v-html="summaries[index]"></div>
                        </div>
                    </div>

                </div>

                <div class="search-button-top-nav">
                    <div v-show="moreResults" class="button-wrapper load-more-container load-more-wrapper">
                        <div class="button-wrapper-2">
                            <div class="button-container">
                                <a @click="loadMoreResults" class="btn -primary load-more">Load More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{resultCount}}结果
"hits": [
    {
      "id": 1,
      "title": "product1",
      "path": "/path/to/product1",
      "properties": {
        "thumbnailPath": "/products/images/product1.jpg",
        "productTitle": "Product 1",
        "summary": "<p>This is product 1.</p>\r\n"
      }
    },
    {
      "id": 2,
      "title": "product2",
      "path": "/path/to/product2",
      "properties": {
        "thumbnailPath": "/products/images/product2.jpg",
        "productTitle": "Product 2",
        "summary": "<p>This is product 2.</p>\r\n"
      }
    }
]