Skip to content

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

Open
@IlCallo

Description

@IlCallo

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions