expanded rows example in QTable behaves unexpectedly

[cbleek]

What happened?

I take the expanding row demo and change the data structure of the result set from

const rows = [
  {
    name: 'Frozen Yogurt',
    calories: 159
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
  }
]

in

const rows = [
  {
    id: 1,
    attributes: {
      name: 'Frozen Yogurt',
      calories: 159,
    },
  },
  {
    id: 2,
    attributes: {
      name: 'Ice cream sandwich',
      calories: 237,
    },
  },
];

After that, both expanded rows open and close simultaneously.

What did you expect to happen?

the expanded rows should open and close individually

Reproduction URL

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

How to reproduce?

go to the provided link https://stackblitz.com/edit/quasarframework-zf2kyt?file=src%2Fpages%2FIndexPage.vue

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[thegrandpoobah]

I know this issue is relatively old, but I ran into the same issue and the problem was that the row-key on the q-table component that I had chosen was not unique (in my case it didn't even exist).

In the linked to stackblitz, i see the row key is set to name, but name is not on the root of the row objects and instead inside the attributes field. Changing the row key to id fixes the issue: https://stackblitz.com/edit/quasarframework-yrlml1?file=src%2Fpages%2FIndexPage.vue

Hope that helps!