[SOLVED] How to create a render function that renders several QDialogs

[mesqueeb]

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>

[mesqueeb]

EDIT:
I have also posted the question here on SO:
https://stackoverflow.com/questions/55929801/vues-render-createelement-gives-error-when-passed-a-regular-vue-file

[mesqueeb]

Solved by changing:

• [h([dialogs[id]])]

to

• [h(dialogs[id])]

[metalsadman]

@mesqueeb said in How to create a render function that renders several QDialogs:

Solved by changing:

• [h([dialogs[id]])]

to

• [h(dialogs[id])]

that’s what you did here

@mesqueeb said in How to create a render function that renders several QDialogs:

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>

[mesqueeb]

Oh lol, I guess when I wrote that question on the forum I didn’t copy paste, and wrote [h(dialogs[id])] by mistake lol!!!
When I put it on SO I had copied it, so my mistake stayed.

Wow what a dweep I am