javascript - 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 个项目。如果我在控制台中检查用户数组，它会显示所有 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>

标签： javascriptarraysvue.jsvuetify.js

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>

将 disable-pagination 添加到 v-data-table 解决了我的问题。