Vue中Ajax请求动态拼接数组无法渲染新结果问题

首先，我注意到你的代码里有几个关键问题导致了分页追加内容无法渲染的情况，咱们一步步来排查修复：

1. 修复Computed属性中的未定义变量错误 #

你的pdpPaths计算属性里存在一个未定义的变量pdpPath，这会直接抛出ReferenceError，打断Vue的响应式更新流程——虽然searchResults数组已经正确追加了新元素，但后续渲染会因为这个错误卡住，新结果自然无法显示。

看这段有问题的代码：

pdpPaths: function() {
    return this.searchResults.map(function(item) {
        let catalogPath = item.path;
        // 这里的pdpPath没有定义！
        return decodeURIComponent(pdpPath) + catalogPath.replace(decodeURIComponent(catalogRoot), "").replace(/\//g, ".");
    });
},

你需要把pdpPath替换成实际存在的变量：如果是全局变量就改成window.pdpPath，如果是Vue实例的data属性就用this.pdpPath。修复后先打开浏览器控制台确认没有报错，这是解决问题的核心。

2. 移除不必要的重复请求 #

在getSearchResults方法中，首次加载（!this.returnedFacetHeaders）时，你在第一个done回调后额外加了一个done回调，再次调用this.getSearchResults()：

jqXhr.done(function(response) {
    // ... 现有处理逻辑
}).done(function () {
    this.getSearchResults(); // 这行是多余的！
});

这个重复请求会在初始加载时发起两次查询，第二次请求的currentPage还是1，会把searchResults重置为新请求的结果，导致分页状态混乱，甚至覆盖之前的结果。直接移除这个额外的done回调即可。

3. 确认响应式更新的正确性 #

你当前使用concat更新数组的方式是正确的：

this.searchResults = this.searchResults.concat(data.hits);

Vue可以检测到数组的替换操作。如果你想换一种方式，也可以用扩展运算符或者push批量添加：

// 方式1：扩展运算符
this.searchResults = [...this.searchResults, ...data.hits];
// 方式2：push批量添加
this.searchResults.push(...data.hits);

这几种方式都能触发Vue的响应式更新，不需要额外使用Vue.set（除非修改数组单个索引，这里是追加元素，完全不需要）。

4. 检查模板的索引依赖 #

你在模板里通过index获取pdpPaths和summaries的内容，这个用法本身没问题——当searchResults更新时，计算属性会重新计算，对应的数组也会同步更新。但前提是计算属性没有报错，所以第一步的修复是重中之重。

验证修复效果 #

修复完上面的问题后，重新测试分页功能：

• 点击「Load More」按钮，确认currentPage正确递增
• 检查searchResults数组是否成功追加新元素
• 查看控制台是否有新的报错

如果还是有问题，可以临时在doSearchStuff方法末尾添加this.$forceUpdate()（不推荐长期使用，但可以用来排查是否是响应式检测的问题）：

doSearchStuff: function(response, data) {
    // ... 现有逻辑
    this.facetCount = data.facets.length;
    // 临时强制更新DOM
    this.$forceUpdate();
}

内容的提问来源于stack exchange，提问作者adammtlx