Javascript 默认排序在v-data-table Vuetify中不起作用

我有从服务器获取的用户数据，这些数据按年龄顺序排序。当用户数据传递给子组件时，它不会在v-data-table中显示按年龄的描述顺序排序的数据，当我刷新页面时，它会显示按降序排序的数据。请帮我找出哪里出了问题。我使用的是vuetify 2.3.10版

从父组件中的服务器获取数据时，如下所示：

[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]

[{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }, {full_name: 'James Ross', city: 'Toronto', age: 45 }]

当子组件第一次加载时，用户数据如下所示：

[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]

[{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }, {full_name: 'James Ross', city: 'Toronto', age: 45 }]

所以基本上它是没有排序的，当我刷新页面时，子组件中的用户数据显示完美的finish

[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]

父组件

<template>
  <div>
      <Users :users="users"></Users>
  </div>
</template>


<script>
import Users from 'views/lawyers/_users_table.vue';

export default {
  components: {
    Users
  },
  data: () => ({
    users: [],
  }),
  created: function() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      this.$axios.get('/users.json')
      .then(response => {
        this.users = response.data;
      })
    }
  }
};
</script>

从“views/layers/_Users_table.vue”导入用户；
导出默认值{
组成部分：{
使用者
},
数据：（）=>({
用户：[]，
}),
已创建：函数（）{
this.fetchUsers（）；
},
方法：{
fetchUsers（）{
这是.$axios.get（'/users.json'））
。然后（响应=>{
this.users=response.data；
})
}
}
};

子组件

<template>
  <div>
      <Users :users="users"></Users>
  </div>
</template>


<script>
import Users from 'views/lawyers/_users_table.vue';

export default {
  components: {
    Users
  },
  data: () => ({
    users: [],
  }),
  created: function() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      this.$axios.get('/users.json')
      .then(response => {
        this.users = response.data;
      })
    }
  }
};
</script>

  <template>
   <div>
    <v-data-table
              :headers="headers"
              :items="users"
              :disable-pagination="true"
              v-model="users"
              hide-default-footer
              class="elevation-1"
     >
       <template slot="item" slot-scope="props">
         <tr>
           <td class="full-name">{{ props.item.full_name }}</td>
           <td class="summary">{{ props.item.address}}</td>
           <td class="experience">{{ props.item.age }} years</td>
         </tr>
       </template>
    </v-data-table>
   </div>
  </template>
   



<script>

export default {
  props: ['users'],
  data: () => ({
    headers: [
      { text: 'Name', value: 'full_name', sortable: false  },
      { text: 'Address', value: 'address', sortable: false  },
      { text: 'Age',value: 'age' }
    ]
  }),
};
</script>

{{props.item.full_name}
{{props.item.address}
{{props.item.age}}年
导出默认值{
道具：[“用户”]，
数据：（）=>({
标题：[
{text:'Name'，value:'full_Name'，sortable:false}，
{text:'Address'，value:'Address'，sortable:false}，
{文本：'Age'，值：'Age'}
]
}),
};

保持安全的最佳方法是在数据表中设置排序方式：

<v-data-table
          :sort-by="['age']"
          :headers="headers"
          :items="users"
          :disable-pagination="true"
          v-model="users"
          hide-default-footer
          class="elevation-1"
 >