Question

我正在开发一个小型应用程序，该应用程序在 HTML5表中显示“用户” JSON。为此，我使用 Twitter Bootstrap 3 ， Axios 和 Vue.js 2 。

我到目前为止的代码：

cellForRowAt

var app = new Vue({
    el: '#app',
    data: {
        users: [],
        loading: true,
        errored: false,
        url: "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture",
        page: 1,
        perPage: 10,
        pages: [],

    },
    methods: {
        getUsers() {
            axios
                .get(this.url)
                .then(response => {
                    this.users = response.data.results
                })
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)
        },
        setPages() {
            var numberOfPages = Math.ceil(this.users.length / this.perPage);
            for (var index = 1; index <= numberOfPages; index++) {
                this.pages.push(index);
            }
        },
        paginate(users) {
            var page = this.page;
            var perPage = this.perPage;
            var from = (page * perPage) - perPage;
            var to = (page * perPage);
            return users.slice(from, to);
        }
    },
    created() {
        this.getUsers();
    },
    watch: {
        users() {
            this.setPages();
        }
    },
    computed: {
        displayedUsers() {
            return this.paginate(this.users);
        }
    },
    filters: {
        lowercase(value) {
            return value.toLowerCase();
        },
        capitalize(value) {
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
});

.table-container {
  margin: 10px;
}
.table-container .panel-heading {
  font-weight: bold;
}
.table-container .panel-body {
  padding: 0;
}
.table-container table {
  margin-bottom: 0;
  border: none;
}
.table-container table tr:last-child td {
  border-bottom: none;
}
.table-container table tr th {
  font-weight: bold;
}
.table-container table tr th:first-child, .table-container table tr td:first-child {
  border-left: none;
}
.table-container table tr th:last-child, .table-container table tr td:last-child {
  border-right: none;
}
.table-container table tr td {
  padding: 2px 8px !important;
  vertical-align: middle;
}
.table-container table tr td .picture {
  padding-right: 10px;
}
.table-container table tr td img {
  max-height: 30px;
  width: auto;
  border: 1px solid #c7c7c7;
}

我已将结果分页（每页10个）。问题是，我被困将活动班级添加到当前页面项目：<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="app" class="container"> <div class="panel panel-default table-container"> <div class="panel-heading">Users</div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered" id="dataTable"> <thead> <tr> <th class="text-right">#</th> <th>Name</th> <th>Email</th> <th>City</th> </tr> </thead> <tbody> <tr v-for="(user, index) in displayedUsers"> <td class="text-right">{{perPage * (page - 1) + index + 1}}</td> <td> <span class="picture"> <img :src="user.picture.thumbnail" :alt="user.name.first + ' ' + user.name.last" class="img-circle"> </span> <span>{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span> </td> <td><a :href="'mailto:' + user.email | lowercase">{{user.email | lowercase}}</a></td> <td>{{user.location.city | capitalize}}</td> </tr> </tbody> </table> </div> </div> </div> <nav class="text-center" aria-label="Page navigation"> <ul class="pagination pagination-sm"> <li> <a href="#" @click="page = 1" aria-label="First"> <span aria-hidden="true">«</span> </a> </li> <li> <a href="#" v-if="page != 1" @click="page--" aria-label="Previous"> <span aria-hidden="true">&lsaquo;</span> </a> </li> <li v-for="pageNumber in pages.slice(page-1, page+4)"><a href="#" @click="page = pageNumber">{{pageNumber}}</a></li> <li> <a href="#" @click="page++" v-if="page < pages.length" aria-label="Next"> <span aria-hidden="true">&rsaquo;</span> </a> </li> <li> <a href="#" @click="page = pages.length" aria-label="Last"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>。

我该如何实现？

Answer 1

像这样（快速示例）：

 <li :class="{'active': page === 1}">...</li>

或

 <li :class="{'active': page === pages.length}">...</li>

希望，我理解你的问题。

Answer 2

将:class="{'active': page === pageNumber}添加到页面项目迭代代码可以正常工作：

var app = new Vue({
    el: '#app',
    data: {
        users: [],
        loading: true,
        errored: false,
        url: "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture",
        page: 1,
        perPage: 10,
        pages: [],

    },
    methods: {
        getUsers() {
            axios
                .get(this.url)
                .then(response => {
                    this.users = response.data.results
                })
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)
        },
        setPages() {
            var numberOfPages = Math.ceil(this.users.length / this.perPage);
            for (var index = 1; index <= numberOfPages; index++) {
                this.pages.push(index);
            }
        },
        paginate(users) {
            var page = this.page;
            var perPage = this.perPage;
            var from = (page * perPage) - perPage;
            var to = (page * perPage);
            return users.slice(from, to);
        }
    },
    created() {
        this.getUsers();
    },
    watch: {
        users() {
            this.setPages();
        }
    },
    computed: {
        displayedUsers() {
            return this.paginate(this.users);
        }
    },
    filters: {
        lowercase(value) {
            return value.toLowerCase();
        },
        capitalize(value) {
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
});

.table-container {
  margin: 10px;
}
.table-container .panel-heading {
  font-weight: bold;
}
.table-container .panel-body {
  padding: 0;
}
.table-container table {
  margin-bottom: 0;
  border: none;
}
.table-container table tr:last-child td {
  border-bottom: none;
}
.table-container table tr th {
  font-weight: bold;
}
.table-container table tr th:first-child, .table-container table tr td:first-child {
  border-left: none;
}
.table-container table tr th:last-child, .table-container table tr td:last-child {
  border-right: none;
}
.table-container table tr td {
  padding: 2px 8px !important;
  vertical-align: middle;
}
.table-container table tr td .picture {
  padding-right: 10px;
}
.table-container table tr td img {
  max-height: 30px;
  width: auto;
  border: 1px solid #c7c7c7;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app" class="container">
  <div class="panel panel-default table-container">
    <div class="panel-heading">Users</div>
    <div class="panel-body">
      <div class="table-responsive">
        <table class="table table-striped table-bordered" id="dataTable">
          <thead>
            <tr>
              <th class="text-right">#</th>
              <th>Name</th>
              <th>Email</th>
              <th>City</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(user, index) in displayedUsers">
              <td class="text-right">{{perPage * (page - 1) + index + 1}}</td>
              <td>
                <span class="picture">
                  <img :src="user.picture.thumbnail" :alt="user.name.first + ' ' + user.name.last" class="img-circle">
                </span>
                <span>{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span>
              </td>
              <td><a :href="'mailto:' + user.email | lowercase">{{user.email | lowercase}}</a></td>
              <td>{{user.location.city | capitalize}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <nav class="text-center" aria-label="Page navigation">
    <ul class="pagination pagination-sm">
      <li>
        <a href="#" @click="page = 1" aria-label="First">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li>
        <a href="#" v-if="page != 1" @click="page--" aria-label="Previous">
          <span aria-hidden="true">&lsaquo;</span>
        </a>
      </li>
      <li v-for="pageNumber in pages.slice(page-1, page+4)" :class="{'active': page === pageNumber}"><a href="#" @click="page = pageNumber">{{pageNumber}}</a></li>
      <li>
        <a href="#" @click="page++" v-if="page < pages.length" aria-label="Next">
          <span aria-hidden="true">&rsaquo;</span>
        </a>
      </li>
      <li>
        <a href="#" @click="page = pages.length" aria-label="Last">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

Vue中的分页JSON应用：如何将类添加到当前页面项？

2 个答案: