Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jirakitc opened this issue Nov 25, 2024 · 1 comment
Open
Labels
bug Something isn't working triage v3 #1289

Comments

@jirakitc
Copy link

jirakitc commented Nov 25, 2024

Environment

  • Operating System: Windows_NT
  • Node Version: v20.12.2
  • Nuxt Version: 3.13.2
  • CLI Version: 3.14.0
  • Nitro Version: 2.9.7
  • Package Manager: [email protected]
  • Builder: -
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

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 :

  • Filter "UserC" ,The table will filter "UserC" to the top of row.
  • Clicking Button 'Log InSide / OutSide'
<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 jirakitc added bug Something isn't working triage v3 #1289 labels Nov 25, 2024
@jirakitc jirakitc changed the title UTable sending wrong data,When use selection table and filtered table at the same time UButtonGroup sending wrong data blinding, when used with filtered Data Nov 25, 2024
@jirakitc
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage v3 #1289
Projects
None yet
Development

No branches or pull requests

1 participant