Vue.js无需点击分页自动展示在线用户数据问题求助

已实现在线用户数据展示功能，但页面初始化时不会自动加载第1页数据，必须手动点击分页栏的第1页才能显示。需要修改为页面加载时自动加载第1页在线用户数据。

截图说明：

• 点击前：页面表格无用户数据，分页栏显示第1页但未激活数据加载状态
• 点击后：表格显示第1页在线用户数据，分页栏第1页处于激活状态

相关代码 #

组件Data与计算属性 #

data() {
  return {
    sales: [],
    warehouses: [],
    warehouse_id: "",
    stock_alerts: [],
    report_today: {
      revenue: 0,
      today_purchases: 0,
      today_sales: 0,
      return_sales: 0,
      return_purchases: 0,
      expenses: 0,
      shipments: 0
    },
    products: [],
    CurrentMonth: "",
    loading: true,
    echartSales: {},
    echartProduct: {},
    echartCustomer: {},
    echartPayment: {},
    users: {
      data: [],
      current_page: 1,
      last_page: 1,
      per_page: 10,
      total: 0
    },
    currentPage: 1,
    perPage: 10,
  };
},
computed: {
  totalPages() {
    return this.users.last_page;
  },
}

模板代码 #

<!-- Status Online/Offline Users -->
<b-row>
  <div class="col-md-12">
    <div class="card mb-30">
      <div class="card-body p-1">
        <h5 class="card-title border-bottom p-3 mb-2">Online Users</h5>

        <table class="table table-bordered data-table">
          <thead>
            <tr>
              <th>No</th>
              <th>Name</th>
              <th>Email</th>
              <th>Last Seen</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(user, index) in users.data" :key="user.id">
              <td>{{ index + 1 + ((users.current_page - 1) * users.per_page) }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.email }}</td>
              <td>{{ user.last_seen_diff }}</td>
              <td>
                <span :class="{'text-success': user.status === 'Online', 'text-secondary': user.status === 'Offline'}">
                  {{ user.status }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- Pagination Controls -->
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li class="page-item" :class="{ disabled: users.current_page <= 1 }">
              <a class="page-link" href="#" @click.prevent="changePage(users.current_page - 1)">Previous</a>
            </li>
            <li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: page === users.current_page }">
              <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
            </li>
            <li class="page-item" :class="{ disabled: users.current_page >= totalPages }">
              <a class="page-link" href="#" @click.prevent="changePage(users.current_page + 1)">Next</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</b-row>

方法与生命周期钩子 #

//---------- Online/Offline Users --------------
async getUsers(page = 1) {
  this.loading = true;
  console.log('Getting users for page:', page);
  try {
    console.log('Fetching data for page:', page);
    const response = await axios.get('/online-user', {
      params: {
        page: page,
        limit: this.perPage
      }
    });
    console.log(response.data);
    this.users = response.data;
    this.currentPage = page;
    this.loading = false;
  } catch (error) {
    console.error('There was an error!', error);
    this.loading = false;
  }
},
async changePage(page) {
  if (page > 0 && page <= this.totalPages) {
    this.currentPage = page;
    await this.getUsers(page);
  }
},
async mounted() {
  await this.getUsers(this.currentPage);
},

问题排查与修复 #

核心问题：生命周期钩子位置错误 #

现有代码中mounted被嵌套在methods对象内部，这不符合Vue的语法规范，导致钩子函数无法被自动执行。

修复步骤 #

1. 调整mounted的位置
   将mounted从methods中移出，与data、methods、computed同级：

   methods: {
     async getUsers(page = 1) {
       // ...现有代码
     },
     async changePage(page) {
       // ...现有代码
     }
   },
   async mounted() {
     await this.getUsers(this.currentPage);
   }
   

2. 可选：直接传入固定页码
   为避免初始化时this.currentPage的潜在问题，可直接在mounted中传入1：

   async mounted() {
     await this.getUsers(1);
   }
   

3. 验证执行状态
   打开浏览器控制台，检查是否输出Fetching data for page: 1日志：

   • 若未输出：确认组件是否正确挂载，或有无其他代码阻止mounted执行
   • 若输出但无数据：检查后端接口返回的response.data是否包含有效用户列表，排查后端逻辑

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