how can I make selectable rows work on Vuetify 2.0 datatables with ssr pagination? - datatable

Question

I hope everyone's fine
I'm trying to make the show-select feature work on Vuetify 2.0.x datatables with SSR pagination, with no luck at all.
We were working on vuetify 1.5.x up until now and we changed since it was troubling in there too.
Here's a codepen
I'm just using show-select docs are not further specific

Answer 1

You have missed item-key="unique column name" in v-data-table
here is the codepen
https://codepen.io/manojkmishra/pen/OJMNjzq?editors=1010
Template part
<v-app id="inspire">
<div>
{{msg}}
<v-data-table show-select v-model="selected"
:headers="headers"
:items="desserts"
:options.sync="options"
:items-per-page="5"
:server-items-length="totalDesserts"
:loading="loading"
class="elevation-1"
item-key="name"
></v-data-table>
</div>
</v-app>
Script part
<script>
export default {
data () {
return { selected: [],
totalDesserts: 0,
desserts: [],
loading: true,
options: {},
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},
watch: {
options: {
handler () {
this.getDataFromApi()
.then(data => {
this.desserts = data.items
this.totalDesserts = data.total
})
},
deep: true,
},
},
computed: {
msg() {
console.log('msg-',this.selected)
return this.selected
}
},
mounted () {
this.getDataFromApi()
.then(data => {
this.desserts = data.items
this.totalDesserts = data.total
})
},
methods: {
getDataFromApi () {
this.loading = true
return new Promise((resolve) => {
const { sortBy, sortDesc, page, itemsPerPage } = this.options
let items = this.getDesserts()
const total = items.length
if (sortBy.length === 1 && sortDesc.length === 1) {
items = items.sort((a, b) => {
const sortA = a[sortBy[0]]
const sortB = b[sortBy[0]]
if (sortDesc[0]) {
if (sortA < sortB) return 1
if (sortA > sortB) return -1
return 0
} else {
if (sortA < sortB) return -1
if (sortA > sortB) return 1
return 0
}
})
}
if (itemsPerPage > 0) {
items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
}
setTimeout(() => {
this.loading = false
resolve({
items,
total,
})
}, 1000)
})
},
getDesserts () {
return [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
]
},
},
}
</script>