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

Relying on key attribute for QTd causes quirks when wrapping a QTd and using it in #body slot #17830

Open
IlCallo opened this issue Feb 14, 2025 · 0 comments
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@IlCallo
Copy link
Member

IlCallo commented Feb 14, 2025

What happened?

When wrapping a QTd in a custom component and using it into a QTable #body slot, we cannot rely on attrs inheritance as key is handled as a special prop by Vue, causing the custom QTd to not display at all

This should only be the case when using #body slot to customize QTr too, as in all other cases the key attribute is automatically determined and set by Quasar itself

What did you expect to happen?

It should "just work"

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-gywz3vyd?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

  1. Open the repro
  2. Check out "Test C" cells
  3. Check out "IndexPage.vue" and "CustomTd.vue" files

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System        Linux(6.8.0-52-generic) - linux/x64
NodeJs                  20.16.0

Global packages    
  NPM                   10.8.1
  yarn                  Not installed
  @quasar/cli           2.3.0
  @quasar/icongenie     3.1.0
  cordova               Not installed

Networking         
  Host                  callo-ThinkPad-T580
  enx00e04c6814f4       192.168.50.56
  wlp4s0                192.168.50.72
  br-0cad5c998e5e       172.28.0.1
  br-3f3204672b4c       172.27.0.1

Relevant log output

No response

Additional context

This is similar to the problem we had with QTable when we were using data prop, which conflicted with Vue own data property
In that case it was a simple TS error, while in this case the problem happens at runtim

I'd suggest to use a prop to provide the column name to QTd (e.g. name) instead of relying on the key special attribute, automatically setting key to the new prop value inside QTd (if possible)

I don't think we can fix this without a breaking change, we need to wait for Qv3 release to fix it
In the repro I suggest a workaround to have it working in Qv2

@IlCallo IlCallo added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Feb 14, 2025
@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Feb 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant