I’m learning about render functions.
I was able to render a list of QDialogs, but just the vue components I load to show as slot of the QDialog shows undefined…
Below you see the screenshot, the QDialog shows up with mask, but the contents say:
This is my Dialogs.vue “render the QDialogs” vue file:
<style lang="stylus" scoped>
// some css
</style>
<script>
import { QDialog } from 'quasar'
import Signin from './Signin'
const dialogs = {
Signin
}
const dialogIds = Object.keys(dialogs)
function createDialogNode (id, h, parent) {
return h(QDialog, {
props: {
value: parent.toggles[id]
},
on: {
input: function (newState) {
parent.toggles[id] = newState
}
}
}, [dialogs[id]])
}
export default {
created () {
this.$root.$dialog = {
show: this.show,
hide: this.hide,
toggle: this.toggle,
}
},
data () {
return {
toggles: dialogIds.reduce((carry, id) => {
carry[id] = false
return carry
}, {})
}
},
methods:
{
show (id) { this.toggles[id] = true },
hide (id) { this.toggles[id] = false },
toggle (id) { this.toggles[id] = !this.toggles[id] },
},
render (h) {
return h(
'div',
{class: 'dialogs'},
dialogIds.map(id => createDialogNode(id, h, this))
)
}
}
</script>
This file works perfectly and shows the actual QDialogs in my Vue tree.
This is my Signin component:
<template>
<div class="dialog-signin">
Hello 🐱
</div>
</template>
<style lang="stylus" scoped>
// some css
</style>
<script>
export default {
computed:
{
},
methods:
{
}
}
</script>
If I change the last line in my createDialogNode function to just a string it works, but that’s not really helpful XD
function createDialogNode (id, h, parent) {
return h(QDialog, {
props: {
value: parent.toggles[id]
},
on: {
input: function (newState) {
parent.toggles[id] = newState
}
}
}, 'Hello') // this works
}
Any advice much appreciated!
I also tried this
}, [h(dialogs[id])]) but it gives me this error:
Failed to mount component: template or render function not defined.
found in
—> <Anonymous>
<Root>
