[Vuejs]-Default sort not working in v-data-table Vuetify

by

3👍

✅

The best way to keep it safe is to set sort-by in your data-table:

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

[UPDATE]

To complete Václav Procházka‘s answer, you can also provide sort-desc to force it to be decrescent.

Also It’s an anti-pattern since v2 to mutate props directly check docs here.
The ideal way is to make a clone of it or to use a computed property like below.

Using this.$emit('update:usersProp', val) will try to update your prop on parent component so you parent should look like this <Users :usersProp.sync="users"></Users> or if you use this.value and this.$emit(input, val), then you can use <Users v-model="users"></Users>. Docs here and 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>
👤Václav Procházka

Leave a comment