I have users data fetched from the server which is sorted in desc order of age. When the users data is passed to the child ponent, it doesn't display data sorted in the desc order of the age in the v-data-table and when I refresh the page then it shows data sorted in the descending order. Please help me find where I am going wrong. I am using vuetify version 2.3.10

When the data is fetched from the server in the parent ponent it is as follows:

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

When the child ponent loads for the first time the users data is as follows:

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

So basically it is not sorted and when I refresh the page then users data in the child ponent shows perfectly 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 }]

parent ponent

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


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

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

childponent

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

I have users data fetched from the server which is sorted in desc order of age. When the users data is passed to the child ponent, it doesn't display data sorted in the desc order of the age in the v-data-table and when I refresh the page then it shows data sorted in the descending order. Please help me find where I am going wrong. I am using vuetify version 2.3.10

When the data is fetched from the server in the parent ponent it is as follows:

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

When the child ponent loads for the first time the users data is as follows:

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

So basically it is not sorted and when I refresh the page then users data in the child ponent shows perfectly 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 }]

parent ponent

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


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

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

childponent

  <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

Share Follow edited Feb 11, 2021 at 0:43 user12763413 asked Feb 10, 2021 at 23:51 user12763413user12763413 1,34955 gold badges2626 silver badges7373 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 plete 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 puted property like below.

Using this.$emit('update:usersProp', val) will try to update your prop on parent ponent 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' }
    ],
  }),
  puted: {
    users: {
      get () {
        return this.usersProp
      },
      set (val) {
        this.$emit('update:usersProp', val)
      }
    }
  }
})

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr/npm/[email protected]/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/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>
</body>
</html>