Configuró su columna 'Recuento de enlaces' para count el campo y usar la ranura item.count en el componente, pero el clasificador de tablas interno no tiene idea de qué es este campo de count .

Si está seguro de que su columna de details nunca tendrá valores específicos como nulo , indefinido , etc., puede cambiar su código de esta manera:

 ... { text: 'Link Count', value: 'details.length', width: '10%', sortable: true}, ... <template v-slot:item.details.length="{ item }"> {{ item.details.length }} </template> ...

(O ni siquiera necesita anular esta ranura)

De lo contrario, si le importa nulo/indefinido, sería mejor crear una propiedad calculada con sus datos actuales más una columna de count calculada adicional, y usarla en lugar de items en el componente. De esta manera, por ejemplo:

 <v-data-table :headers="headers" :items="computedDesserts" :items-per-page="5" ></v-data-table> ... data () { return { headers: [ { text: 'Dessert (100g serving)', value: 'name'}, { text: 'Dessert Count', value: 'count' }, ... ], desserts: [ { name: 'Frozen Yogurt', calories: 159, ... }, ... ], } }, computed: { computedDesserts() { return this.desserts.map(item => { return { ...item, count: this.isValidString(item.name) ? item.name.length : 0 } }); } }, methods: { isValidString(val) { return typeof val === 'string'; //Or you can use your own condition } }

La demostración de CodePen con accesorios computarizados está disponible aquí .

De forma predeterminada, <v-data-table> viene con una funcionalidad ordenable para todas las columnas. Por su pregunta, ¿qué entendí si, de forma predeterminada, desea que la columna de count se ordene en orden ascendente/descendente cuando se carga la cuadrícula?

En caso afirmativo, puede lograrlo utilizando la función de clasificación externa de la cuadrícula de datos.

demostración de trabajo :

 new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { sortBy: 'count', sortDesc: false, headers: [ { text: 'Name', align: 'start', value: 'name', width: '20%' }, { text: 'Link Count', value: 'count', width: '10%' }, { text: 'URL', value: 'details', width: '50%' }, { text: 'Actions', value: 'id', width: '20%' } ], items: [ { name: 'Frozen Yogurt', count: 159, details: 'Detail 1', id: 24 }, { name: 'Ice cream sandwich', count: 237, details: 'Detail 2', id: 37 }, { name: 'Eclair', count: 262, details: 'Detail 3', id: 23 }, { name: 'Cupcake', count: 305, details: 'Detail 4', id: 67 } ], } } })

 <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <div id="app"> <v-app id="inspire"> <div> <v-data-table :headers="headers" :items="items" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" class="elevation-1" ></v-data-table> </div> </div> </v-app> </div>

Avíseme si mi comprensión no es correcta o si se requieren cambios adicionales según el requisito.