quasar
quasar copied to clipboard
Specifying a key on QTd other than column.name results in nothing beeing rendered
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?
- Go into /src/pages/Index.vue
- 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.
It has nothing to do with the keys
You are setting :props="props" - check what you want to do there