I want to use a v-data-table-virtual
from Vuetify to show API scopes. The problem is that I have 643 scopes but when selecting all rows it only selects 611 scopes.
Here are the relevant parts of my Vue component:
<template>
<v-data-table-virtual
v-model="selectedScopes"
:headers="headers"
:items="allScopes"
:height="600"
fixed-header
show-select
item-value="scope"
/>
</template>
<script setup>
import { onMounted, ref } from "vue";
const app = useApp();
const api = useApi();
const allScopes = ref([]);
const selectedScopes = ref([]);
const headers = ref([
{ title: tc("Scope"), value: "scope" },
{ title: tc("Method"), value: "method", width: "150px" },
{ title: tc("Scope group"), value: "scope_group", width: "150px" }
]);
onMounted(async () => {
await getScopes();
});
const getScopes = async () => {
try {
const response = await api.get("/core/scopes");
// respones.data.length = 643
allScopes.value = response.data;
} catch (error) {
app.setError(error);
}
};
</script>
Why when I select all scopes it only selects 611? Why this specific number?
Most likely some items contain the same value in scope
. Check that there aren't any duplicates (same scope different method?) and consider setting a different property in item-value
, which is used to check if an item is already selected.
Vuetify selects only one item for every distinct value found under the item-value
property.