v-data-table不显示所有行

Question

我正在使用vuetify v-data-table组件。我在这里面临的问题是最后一行没有显示。现在我得到的输出是

James
Jack
William
Ross

但实际输出如下所示

James
Jack
William
Ross
Jimmy

如果我从fetchUser方法中删除unshift代码，那么我会得到

Jack
William
Ross
Jimmy

所以基本上它只显示4个项目，但实际上应该是5个项目。如果我检查控制台中的users数组，它会显示所有5条记录，但在v-data-table中，它只显示4行。请帮我找出哪里出了问题。

 <template>
    <div class="table-layout">
      <v-data-table
        :headers="headers"
        :items="users"
        :hide-default-footer="true"
        class="user-table"
      >
        <template slot="item" slot-scope="props">
          <tr>
            <td>{{ props.item.name }}</td>
          </tr>
        </template>
      </v-data-table>
    </div>
</template>

<script>
  export default {
    components: {
    },
    data: function() {
      return {
        headers: [
          {
            text: ' ',
            sortable: false,
            value: 'name'
          }
        ],
        users: []
      };
    },
    created: function() {
      this.fetchUsers();
    },
    methods: {
      fetchUsers(){
        var url = '/users.json';
        this.$axios.get(url)
        .then(response => {
          this.users = response.data
          this.users.unshift({
            name: 'James'
          });
        })
      }
    }
  };
</script>

Answer 1

<template>
    <div class="table-layout">
      <v-data-table
        :headers="headers"
        :items="users"
        :hide-default-footer="true"
        class="user-table"
        disable-pagination
      >
        <template slot="item" slot-scope="props">
          <tr>
            <td>{{ props.item.name }}</td>
          </tr>
        </template>
      </v-data-table>
    </div>
</template>

向v-data-table添加停用分页解决了我的问题。