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

【问题标题】：default sort not working in v-data-table Vuetify默认排序在 v-data-table Vuetify 中不起作用
【发布时间】：2021-05-14 17:30:24
【问题描述】：

我有从服务器获取的用户数据，这些数据按年龄降序排列。当用户数据传递给子组件时，它不会显示按 v-data-table 中年龄的 desc 顺序排序的数据，当我刷新页面时，它会显示按降序排序的数据。请帮我找出哪里出错了。我正在使用 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 }]

父组件

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

【问题讨论】：

标签： javascript vue.js sorting vuetify.js

【解决方案1】：

保证它安全的最好方法是在你的数据表中设置排序依据：

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

[更新]

要完成Václav Procházka的回答，你也可以提供sort-desc强制递减。

从 v2 开始，直接改变道具 check docs here 也是一种反模式。理想的方法是对其进行克隆或使用如下所示的计算属性。

使用this.$emit('update:usersProp', val) 将尝试更新您在父组件上的道具，因此您的父组件应该看起来像这样<Users :usersProp.sync="users"></Users>，或者如果您使用this.value 和this.$emit(input, val)，那么您可以使用<Users v-model="users"></Users>。 Docs here 和 here

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  props: {
    usersProp: {
      default: () => {
        return [
          {full_name: 'Stacey Purkis', city: 'Calgary', age: 32 },
          {full_name: 'Jazz Alzo', city: 'London', age: 24 },
          {full_name: 'James Ross', city: 'Toronto', age: 45 }
        ]
      }
    }
  },
  data: () => ({
    headers: [
      { text: 'Name', value: 'full_name', sortable: false  },
      { text: 'Address', value: 'address', sortable: false  },
      { text: 'Age',value: 'age' }
    ],
  }),
  computed: {
    users: {
      get () {
        return this.usersProp
      },
      set (val) {
        this.$emit('update:usersProp', val)
      }
    }
  }
})

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
        <v-data-table
          :headers="headers"
          :items="users"
          :sort-by="['age']"
          :sort-desc="true"
          :disable-pagination="true"
          v-model="users"
          hide-default-footer
          class="elevation-1"
  ></v-data-table>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>

【讨论】：