Пагинационные ссылки отображаются в виде точек в vue - PullRequest
Новая
       14

Пагинационные ссылки отображаются в виде точек в vue

0 голосов
/ 22 апреля 2020

Я пытаюсь реализовать нумерацию страниц в vue. Проблема, с которой я здесь сталкиваюсь, заключается в том, что ссылки на страницы отображаются в виде точек, как показано на прилагаемом изображении. Количество отображаемых ссылок на страницы правильное. Я могу перемещаться по разным страницам с помощью боковых навигационных стрелок в ссылках на нумерацию страниц (<,>). Я не могу понять, где я иду не так. Помогите мне разобраться в этом вопросе.

enter image description here

<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>

1 Ответ

2 голосов
/ 22 апреля 2020

Проблема в вычисляемом свойстве, в некоторых случаях он возвращает 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
  }
},
...