Vuetify无限滚动调用done('empty')后无法触发加载问题求助

问题原因 #

当调用 done('empty') 时，v-infinite-scroll 组件会内部将 isEmpty 状态设为 true，此时组件会停止监听滚动加载事件，默认已无更多数据可加载。即便后续向 items 数组新增数据，组件也不会自动重置这个状态，导致再次滚动到底部时 onLoad 方法不再触发。$forceUpdate() 无效是因为它仅触发组件DOM刷新，不会修改内部的 isEmpty 状态。

解决方案 #

手动重置组件内部的 isEmpty 状态，让组件恢复监听滚动加载的逻辑。在向 items 数组添加新数据之后，执行以下操作：

代码示例 #

1. 在新增数据到 items 的逻辑后，重置组件状态：

// 示例：向items添加新数据的方法
async addNewItems() {
  const newData = await api.getNewItems();
  this.items.push(...newData);
  
  // 重置无限滚动组件的状态
  if (this.$refs.v_infinite_scroll) {
    this.$refs.v_infinite_scroll.isEmpty = false;
    // 可选：若组件之前处于loading状态，一并重置避免异常
    this.$refs.v_infinite_scroll.loading = false;
  }
}

2. 优化 loadItems 方法（完善逻辑健壮性）：

async loadItems ({ done }) {
  try {
    const data = await api.loadItems;
    
    if (!data) {
      done('empty');
      return;
    }
    
    // 注意：需补充将新数据添加到items的逻辑
    // this.items.push(...data);
    
    done('ok');
  } catch (error) {
    console.error('加载数据失败:', error);
    done('ok'); // 出错时调用done，避免组件一直处于loading状态
  }
}

关键说明 #

• 直接修改组件的 isEmpty 属性是因为v-infinite-scroll未提供官方重置API，该方案基于组件内部状态实现（适用于Vuetify 2.x版本，3.x版本需对应调整内部属性名）。
• 务必在新增数据后立即执行重置操作，确保组件能重新监听滚动事件，再次滚动到底部时触发 onLoad。

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