分页链接在 vue 中显示为点

Question

我正在尝试在 vue 中实现分页。我在这里面临的问题是分页链接显示为点，如附图所示。出现的分页链接数是正确的。我可以使用分页链接 () 上的侧导航箭头在不同的页面上导航。我无法弄清楚我哪里出错了。帮我弄清楚这个问题。

<template>
  <v-app class="abilities">
    <v-data-table
      :headers="headers"
      :items="users"
      hide-actions
      class="user-table"
      v-bind:pagination.sync="pagination"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.date }}</td>
        <td>{{ props.item.description }}</td>
      </template>
      <template slot="no-data" >
        <v-alert id='no-data' :value="true" color="error" icon="warning">
          No User Yet
        </v-alert>
      </template>
    </v-data-table>
    <v-layout row wrap v-if="this.users.length > 5">
      <v-flex xs12>
        <div class="user-pagination">
          <v-pagination v-model="pagination.page" :length="pages"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
  </v-app>
</template>


<script>
export default {
  data: function() {
    return {
      pagination: {
        rowsPerPage: 5,
        page: 1
      },
      headers: [
        {
          text: 'Date',
          sortable: false,
          value: 'name'
        },
        {
          text: 'Description',
          sortable: false,
          value: 'name'
        },
      ],
      users: [],
    };
  },
  created: function() {
    var that = this;

    this.fetchUsers();
  },
    computed: {
    pages () {
      return this.pagination.rowsPerPage ? Math.ceil(this.users.length / this.pagination.rowsPerPage) : 0
    }
  },
  methods: {
    fetchUsers() {
      var url = '/users.json?';
      this.$axios
        .get(url)
        .then(response => {
          let data = response.data;
          let users = [];
          data.map((user, index) => {
            let expandedData = user;

            users.push(expandedData)
          });

          this.users = users;
        });
    }
  }
};
</script>

Answer 1

问题出在计算属性上，在某些情况下它返回 Infinity 和 NaN：

当this.pagination.rowsPerPage 是0 你正在做的事情：

return Math.ceil(this.users.length / 0)

返回infinity，

当this.users.length 是0 你有：

return Math.ceil(0 / 0)

返回NaN

所以你得到...

应该这样做：

computed: {
  pages () {
    return this.pagination.rowsPerPage && this.users.lenght!= 0 ? Math.ceil(this.users.length / this.pagination.rowsPerPage) : 0
  }
},