如何在Vue JS中展示数据而不点击分页

Question

当我想在 VueJS 中显示数据时遇到问题。之前我已经成功显示了“用户在线”数据，但问题是为什么我要显示已有的数据还得点击页面呢？我希望数据能够自动显示，而不必点击第1页。

这是代码：

    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);
      },

Answer 1

我认为如果你使用条件渲染它会起作用，做这样的事情并再次检查:

<template v-if="loading">
 <div>your loading component ... </div>
<template>
<template v-else>
 <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>
</template>

当前代码的问题在于 users 对象及其内部的数组。所以改变内部数组不能重新渲染整个页面，所以通过改变加载状态你可以重新渲染。