Vue加载更多按钮点击后状态异常，如何重置组件数据对象？

看起来你的问题核心是加载完成后没有重置按钮的状态，导致按钮一直停留在禁用和显示"Loading"的状态。咱们一步步来修复这个问题：

问题分析 #

你当前的代码在点击按钮后，只设置了clicked: true和loadMoreText: 'Loading'，但没有在数据加载完成（比如异步请求结束）后把这些状态改回去。而且用clicked来控制按钮禁用也不太合理，不如直接复用按钮上已经绑定的loading状态来统一管理。

修改步骤 #

1. 优化组件的data状态 #

去掉clicked，新增loading属性（你按钮上已经绑定了:loading="loading"，之前data里没定义这个）：

data () {
  return {
    page: 1,
    morePagesAvailable: false,
    loadMoreText: 'Load More',
    loading: false // 新增状态，统一控制加载状态
  }
}

2. 修复loadMore方法 #

重点是在异步加载完成后重置状态，不管请求成功还是失败，都要把按钮恢复到可点击状态（只要还有更多页面）：

methods: {
  async loadMore () {
    // 防止重复点击
    if (this.loading || !this.morePagesAvailable) return

    // 设置加载状态
    this.loading = true
    this.loadMoreText = 'Loading'
    
    try {
      // 这里是你的异步加载逻辑，比如请求接口获取下一页数据
      const response = await yourApiCall({ page: this.page + 1 })
      
      // 处理返回的数据，比如添加到列表里
      // this.list = [...this.list, ...response.data]
      
      // 更新页码
      this.page += 1
      
      // 判断是否还有更多页面，比如根据接口返回的总页数/是否还有数据
      this.morePagesAvailable = response.data.hasMore || this.page < response.data.totalPages
    } catch (error) {
      // 处理错误，比如提示用户加载失败
      console.error('加载失败:', error)
    } finally {
      // 不管成功失败，都重置按钮状态
      this.loading = false
      this.loadMoreText = 'Load More'
    }
  }
}

3. 调整按钮的绑定 #

因为我们用loading来控制禁用状态，所以把:disabled="clicked"改成:disabled="loading"，这样更直观：

<Button 
  v-if="allowLoadMore && morePagesAvailable" 
  :loading="loading" 
  :disabled="loading" 
  @click="loadMore"
> 
  {{ loadMoreText }} 
</Button>

关键说明 #

• 用loading统一管理状态：既控制按钮的加载动画（如果Button组件支持:loading的话），又控制按钮禁用，避免多个状态变量混乱。
• 异步操作的状态重置：必须在finally里重置状态，这样不管请求成功还是失败，按钮都能恢复，用户可以再次尝试点击（只要还有更多页面）。
• morePagesAvailable的更新：一定要根据实际的分页数据来设置这个值，当没有更多页面时，v-if会自动隐藏按钮，用户就看不到了。

这样修改后，按钮只会在加载过程中显示"Loading"并禁用，加载完成后会恢复成"Load More"并可点击，直到没有更多页面时自动隐藏。

内容的提问来源于stack exchange，提问作者Angello L.