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



  • 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:

    4681a6e9-c710-44ed-bdce-55961d8bd0a3-image.png

    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>





  • Solved by changing:

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

    to

    • [h(dialogs[id])]


  • @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>



  • 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 😅


Log in to reply