Table sorted date not correct Table sorted date not correct vue.js vue.js

Table sorted date not correct


In this documentation there is a way to customize the columns content

Based on it we can do:

<template>  <v-content class="mt-12 ml-12">    <h1 class="font-weight-black display-3">Servers</h1>    <v-data-table      class="elevation-1"      :headers="headers"      :items="columns"      :items-per-page="15"    >      <template v-slot:item.attributes.details.rust_last_wipe="{ item }">        <span>{{ item.attributes.details.rust_last_wipe_formatted }}</span>      </template>    </v-data-table>    <ul id="example-1">      <li v-for="(data, index) in columns.data" :key="index">        {{ data.attributes }}      </li>    </ul>  </v-content></template><script>import instances from '../services/instances'export default {  data() {    return {      columns: [],      headers: [        { text: 'Server Name', value: 'attributes.name' },        { text: 'Spieler', value: 'attributes.playerCount' },        { text: 'Avg. FPS', value: 'attributes.details.rust_fps_avg' },        { text: 'Wiped', value: 'attributes.details.rust_last_wipe' }      ]    }  },  async created() {    const { data } = await instances.createInstance()    this.columns = data.data    this.columns.forEach(entry => {      const { players, maxPlayers } = entry.attributes      entry.attributes.playerCount = `${players} / ${maxPlayers}`      const { rust_last_wipe } = entry.attributes.details      const mmmm = new Date(entry.attributes.details.rust_last_wipe)      entry.attributes.details.rust_last_wipe_formatted = `${mmmm.getDate()}.${mmmm.getMonth() + 1}.${mmmm.getFullYear()}`    })    console.log(this.columns)  }}</script>