Quasar: Why is QCheckbox selected all in QTable? - vue.js

Question

I check only one checkbox, but all of the other checkboxs are also checked. It seems like all checkbox has the same index or id, however, there is no way to figure out to fix this issue. I have googled, but could not find the way I am looking for.
Here is the code I wrote
QTable
<q-table
id="selection-table"
:title="undefined"
:data="curData"
:columns="columns"
#request="updateTableData"
:rows-per-page-options="[10, 20, 30, 40, 50]"
:pagination.sync="pagination"
:loading="isLoading"
row-key="name"
class="no-shadow q-pa-none"
selection="multiple"
:selected.sync="selected"
:selected-rows-label="getSelectedString"
>
<template v-slot:body="props">
<q-tr :props="props" class="q-pa-none">
<q-td>
<q-checkbox v-model="props.selected" />
{{ props }}
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
class="q-pa-none"
row-key="name"
:auto-width="col.name == 'title' ? false : true"
>
<span v-if="col.name === 'title'">
{{ props.row.title }}
</span>
<span v-else-if="col.name === 'status'">
<span v-if="col.value === 0">... </span>
<span
v-else-if="
col.value === 200 && props.goodsStatusCode === 11
"
>...</span
>
<span v-else>
<span class="text-red">...)</span>
</span>
</span>
<span v-else> {{ col.value }} </span>
</q-td>
</q-tr>
</template>
</q-table>
Script
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'SelectionTable',
data() {
return {
selected: [],
};
},
methods: {
getSelectedString() {
return this.selected.length === 0
? ''
: `${this.selected.length} record${
this.selected.length > 1 ? 's' : ''
} `;
},
},
});
</script>
Would you let me know what I am missing?

Answer 1

Just in case someone needs this I have figured out what was missing.
What I needed to changed was this:
row-key="name"
to
row-key="_id"
since literally row-key means the key or id of the row I select.
Hope this would help someone like me!