admin 管理员组

文章数量: 1184232

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
Share Improve this question asked Mar 28 at 9:38 SamballSamball 86314 silver badges25 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 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.

本文标签： vuejsVuetify vdatatablevirtual not selecting all itemsStack Overflow

版权声明：本文标题：vue.js - Vuetify `v-data-table-virtual` not selecting all items - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://roclinux.cn/p/1744045729a2524079.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。