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?

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?

• vue.js
• vuetify.js
• v-data-table

1 Answer 1

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.