nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.14k stars 549 forks source link

UButtonGroup sending wrong data blinding, when used with filtered Data #2761

Open jirakitc opened 4 days ago

jirakitc commented 4 days ago

Environment

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.13.2

Reproduction

Sorry for Bad English

Im try to send data object in to function but data each row is not blinding with filter Step :

<script>
const selectedUsers= ref([])

const q = ref('');
let users = [
    {"id":1,"user_name":"UserA",},
    {"id":2,"user_name":"UserB",},
    {"id":3,"user_name":"UserC",},
]
const columns = [
    {
        key: 'id',
        label: 'id',
    },
    {
        key: 'user_name',
        label: 'user',
    },
]
const filteredUsers = computed(() =>{
    if (!q.value) {
        return users
    };
    return users.filter((line) => {
        return Object.values(line).some((value) =>{
            return String(value).toLowerCase().includes(q.value.toLowerCase());
        })
    })
});
</script>

<template>
    <UTable v-model="selectedUsers" :rows="filteredUsers">
        <template #actions-data="{ row }">
            <div class="flex gap-10">
               <UButtonGroup size="sm" orientation="horizontal">
                     <UButton @click="() => console.log(row)">
                        Log Inside Group
                     </UButton>
               </UButtonGroup>
                <UButton @click="() => console.log(row)">
                     Log Out Side Group
                </UButton>
            </div>
        </template>
    </UTable>
</template>

Image

Image

Description

Nuxt sends "UserA" data to the console instead of "UserC".

~~but when I remove v-model="selectedUsers" from Utable it send data correctly when click Log Out Side Group Its work correctly but when click Log Inside Group Its still sending wrong data

Additional context

No response

Logs

jirakitc commented 4 days ago

Sorry problem was solved!! the real problem has come from UButtonGroup not UTable