CODEWITHSUNDEEP
vue.jsvuejs2rendercreateelement
mesqueeb
mesqueeb

Reputation: 6324

Vue's render createElement gives error when passed a regular Vue file

So I created a Vue file with a render function that is supposed to loop over IDs and create components according to those.

Specifically inside my render function I'm using createElement to which I pass three params:

  1. A Vue component (from a JS file)
  2. a config object
  3. A Vue component (from a Vue file)

It's 3. that's giving me this error:

Failed to mount component: template or render function not defined.

this Vue file has no render function, but it does have a template, so I'm confused why this error is happening.

In the code below [createElement([dialogs[id]])] is the part that gives the error:

import { QDialog } from 'quasar'
import Signin from './Signin.vue'
import Signout from './Signout.vue'

const dialogs = {
  Signin,
  Signout
}

function createDialogNode (id, createElement, parent) {
  return createElement(QDialog, {
    props: {
      value: parent.toggles[id]
    },
    on: {
      input: function (newState) {
        parent.toggles[id] = newState
      }
    }
  }, [createElement([dialogs[id]])])
}

// further down I use `createDialogNode` inside the render function and loop over the props inside `dialogs`.

So in the code above you see I have an object dialogs with imported components. These components are regular Vue files.

I want to pass them inside createElement as third param to the other createElement that is returned in my function above.

Upvotes: 0

Views: 966

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

You can't pass an array to createElement as the first argument.

Try this instead:

createElement(dialogs[id])

Upvotes: 1

Related Questions