Javascript 分页链接在vue中显示为点

我正在尝试在vue中实现分页。我在这里面临的问题是分页链接显示为点，如所附图像所示。显示的分页链接数正确。我可以使用分页链接（）上的侧导航箭头在不同页面上导航。我不知道我错在哪里。帮我解决这个问题

{{props.item.date}
{{props.item.description}
还没有用户
导出默认值{
数据：函数（）{
返回{
分页：{
行页码：5，
页码：1
},
标题：[
{
文本：“日期”，
可排序：false，
值：“名称”
},
{
文字：“说明”，
可排序：false，
值：“名称”
},
],
用户：[]，
};
},
已创建：函数（）{
var=这个；
this.fetchUsers（）；
},
计算：{
页数（）{
返回this.pagination.rowsPerPage？Math.ceil（this.users.length/this.pagination.rowsPerPage）：0
}
},
方法：{
fetchUsers（）{
var url='/users.json？'；
这是axios
.get（url）
。然后（响应=>{
让data=response.data；
让用户=[]；
data.map（（用户，索引）=>{
让expandedData=user；
用户推送（expandedData）
});
this.users=用户；
});
}
}
};

问题出在computed属性上，在某些情况下，它返回一个

无穷大

和

NaN

：

当

此.pagination.rowsPerPage

为

0

时，您正在执行以下操作：

返回Math.ceil（this.users.length/0）

返回无穷大

当

this.users.length

为

0

时，您有：

返回Math.ceil（0/0）

返回

NaN

所以你得到了

这应该做到：

计算：{
页数（）{
返回this.pagination.rowsPerPage&&this.users.lenght！=0？Math.ceil（this.users.length/this.pagination.rowsPerPage）：0
}
},

问题出在computed属性上，在某些情况下，它返回一个

无穷大

和

NaN

：

当

此.pagination.rowsPerPage

为

0

时，您正在执行以下操作：

返回Math.ceil（this.users.length/0）

返回无穷大

当

this.users.length

为

0

时，您有：

返回Math.ceil（0/0）

返回

NaN

所以你得到了

这应该做到：

计算：{
页数（）{
返回this.pagination.rowsPerPage&&this.users.lenght！=0？Math.ceil（this.users.length/this.pagination.rowsPerPage）：0
}
},

还是一样。我尝试了你的解决方案，但没有解决。仍然没有改变。同样的问题，实际上是我的错。我正在使用v形制表符分页。将惰性添加到v形选项卡修复了问题，但仍将保持不变。我尝试了你的解决方案，但没有解决。仍然没有改变。同样的问题，实际上是我的错。我正在使用v形制表符分页。将惰性添加到v-tabs解决了这个问题如果您使用浏览器F12检查

..

，这些

..

值在DOM中显示为数字还是相同的

..

？这似乎是

省略号

文本大小写（可能在服务器或前端）。此问题在更改浏览器大小时得到解决。知道如何解决这个问题吗？我认为这可能是Vuetify的噱头：“使用长度道具，您可以设置v分页的长度，如果页面按钮的数量超过父容器，它将截断列表。”我已经在使用长度道具。如果您使用浏览器F12检查

，DOM中的那些
..
值是显示为数字还是相同的
..
？这似乎是
省略号
文本大小写（可能在服务器或前端）。此问题在更改浏览器大小时得到解决。知道如何解决这个问题吗？我认为这可能是Vuetify的噱头：“使用长度道具，您可以设置v分页的长度，如果页面按钮的数量超过父容器，它将截断列表。”我已经在使用长度道具。
<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>