quasar icon indicating copy to clipboard operation
quasar copied to clipboard

Specifying a key on QTd other than column.name results in nothing beeing rendered

Open PPetau opened this issue 3 years ago • 0 comments
trafficstars

What happened?

I have written a custom wrapper around the QTable that overwrites the body slot and allows a user to specify a column-component.

I have keyed both if-paths like so:

<component
  v-if="col.component"
  :is="col.component"
  :key="col.name + '_c'"
  v-bind="{ ...props, col, value: col.value }"
  v-on="_listeners"
/>
<q-td v-else :key="col.name + '_p'" :auto-width="col.autoWidth" :props="props">
  {{ col.value }}
</q-td>

This resulted in nothing being rendered for columns using no custom component.

What did you expect to happen?

I would have expected that the QTd would render normally.

Reproduction URL

https://codesandbox.io/s/kind-babbage-usk89s

How to reproduce?

  1. Go into /src/pages/Index.vue
  2. See in Page that only the "Custom Component" is rendered

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 16.16.0

Global packages 
  NPM - 8.11.0
  yarn - 1.22.4
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.3
  cordova - Not installed

Important local packages
  quasar - 1.19.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.4.1 -- Quasar Framework local CLI
  @quasar/extras - 1.15.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.7.8 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.5.3 -- Official router for Vue.js 2
  vuex - 3.6.2 -- state management for Vue.js       
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.9 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.7.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

I would be happy if this would be mentioned within the docs, in my case the workaround was trivial once the problem was identified.

PPetau avatar Aug 10 '22 08:08 PPetau

It has nothing to do with the keys You are setting :props="props" - check what you want to do there

pdanpdan avatar Aug 10 '22 10:08 pdanpdan