set q-table cell slot dynamically

[salueii]

I want to based on column type, on the fly set custom slot for some cell in q-table something like this :

<q-table>
        <!--  q-table related setting that specify row and column -->

        <!--  slots generated for columns in this.iconClmns list, so we have custom appearance for that columns -->
        <template v-for="clmn in this.iconClmns" :key="clmn.name"  v-slot:body-cell-$clmn.name ="props">
              <q-td  :props="props">
                <q-badge color="blue" :label="props.value" />
                <q-icon  name="fa-solid fa-circle" style="color: #da3445;"/>
              </q-td>
        </template>
</q-table>

PROBLEM is in v-slot:body-cell-$clmn.name ="props" section in fact it must be something like this in run time:
v-slot:body-cell-colmun1 ="props"
v-slot:body-cell-colmun2 ="props"
However led to ERROR.

I would appreciate any help

[metalsadman]

would be something like v-slot:[name] where name would resolve to body-cell-yourSlotName.

[salueii]

Thank you . I change the code as :

<template v-for="clmn in this.iconClmns" :key="clmn.name"  v-slot:[clmn.name] ="props">
            <q-td  :props="props">
              <q-badge color="blue" :label="props.value" />
              <q-icon  name="fa-solid fa-circle" style="color: #da3445;"/>
            </q-td>
        </template>

AND It worked. clmn.name is equal to 'body-cell-ColmunName'

[tomvdk]

Hi there,

We were using this as well. But since the upgrade of the Volar Official Extension to 2.0.28 and the vue-tsc dev package to 2.0.28 we got the following IDE error.

Also, when we run vue-tsc to do type checking we got:

This was not happening on version <= 2.0.22 (released on 6/23/2024).
I filled an issue on github and it appears it should already be fixed but not released yet: Dynamic slot name Template error: Type 'QTableSlots' has no matching index signature for type 'string'.ts-plugin(2537) #4668

However I cannot yet verify if this issue is fixed right now, I will once a new version is released. I thought it might save someone a bit of time troubleshooting.

[salueii]

hi, I engaged to the new project , and give up that project (VUE.js) temporarily, So, I do not have any idea about this BUG

…

On Wed, Aug 21, 2024 at 1:29 AM tomvdk ***@***.***> wrote: Hi there, We were using this as well. But since the upgrade of the Volar Official Extension <https://marketplace.visualstudio.com/items?itemName=Vue.volar> to 2.0.28 and the vue-tsc dev package to 2.0.28 we got the following IDE error. image.png (view on web) <https://github.com/user-attachments/assets/2935329f-21e0-4e2c-b1f1-829eb87fae16> Also, when we run vue-tsc to do type checking we got: image.png (view on web) <https://github.com/user-attachments/assets/aeb08371-0ce6-4b8c-b6a1-38a0fb45a97b> This was not happening on version <= 2.0.22 (released on 6/23/2024). I filled an issue on github and it appears it should already be fixed but not released yet: Dynamic slot name Template error: Type 'QTableSlots' has no matching index signature for type 'string'.ts-plugin(2537) #4668 <vuejs/language-tools#4668> However I cannot yet verify if this issue is fixed in a next release, I thought it might save someone a bit of time troubleshooting. — Reply to this email directly, view it on GitHub <#16288 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A6OD3VKAZPFGCXSWVK4BHWDZSRFYHAVCNFSM6AAAAABM3QAHJKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANBQGQ3DQNQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[tomvdk]

I've just got feedback in the vue/language-tools issue 4668.

Using it like this now:

<template #[getSlotName(actionsKey)]="data">

const getSlotName = (name: string): `body-cell-${string}` => {
  return `body-cell-${name}` as const;
};```

[tomvdk]

After Vue Offical 2.1.0 release this is now fixed. No need for the workaround above anymore.

<template #[body-cell-${actionsKey}]="data"> works fine now.

Update the extension and vue-tsc package to the latest version.

Also see issue: 4668