decision6 / q-formly

A wrapper for vue-formly-quasar theme
MIT License
0 stars 0 forks source link

e.component is not a function #1

Open diegomagikal opened 5 years ago

diegomagikal commented 5 years ago

My quasar app is not rendering the q-formly.

Environment: NodeJs: 9.9.0 NPM: 6.5.0 yarn: 1.13.0 quasar-cli: 0.17.23 vue: 2.5.17 vue-cli: 2.9.6 quasar-framework: 0.17.19

I get this error: image

Code (the same of readme):

<q-formly
:model="model"
:fields="fields"
@submit="onSubmit"
@clear="onClear" />
import VueFormly from 'vue-formly'
import VueFormlyQuasar from '@decision6/vue-formly-quasar'
import QFormly  from '@decision6/q-formly'
form: {},
            model: {
              firstName: '',
              lastName: '',
              age: 1,
              genre: 'M',
              toggle: true,
              select: 'go'
            },
      fields: [
              {
                key: 'firstName',
                type: 'input',
                required: true,
                templateOptions: {
                  field: {
                    icon: 'person',
                    'error-label': 'The person name is invalid'
                  },
                  input: {
                    'float-label': 'First name',
                    type: 'text'
                  }
                }
              },
              {
                key: 'lastName',
                type: 'input',
                templateOptions: {
                  field: {
                    icon: 'person'
                  },
                  input: {
                    'float-label': 'Last name',
                    type: 'text'
                  }
                }
              },
              {
                key: 'age',
                type: 'input',
                required: true,
                validators: {
                  isValid: 'model[ field.key ] <= 100 && model[ field.key ] >= 1'
                },
                templateOptions: {
                  field: {
                    icon: 'person',
                    helper: 'Age must be beetwen 1 and 100 years old',
                    'error-label': 'Age invalid'
                  },
                  input: {
                    'float-label': 'Age',
                    type: 'number',
                    min: 1,
                    max: 120
                  }
                }
              },
              {
                key: 'genre',
                type: 'option-group',
                templateOptions: {
                  field: {
                    icon: 'person'
                  },
                  option_group: {
                    type: 'radio',
                    inline: true,
                    options: [
                      {
                        value: 'M',
                        label: 'Male'
                      },
                      {
                        value: 'F',
                        label: 'Female'
                      }
                    ]
                  }
                }
              },
              {
                key: 'select',
                type: 'select',
                templateOptions: {
                  field: {
                    icon: 'business'
                  },
                  select: {
                    'float-label': 'Works at',
                    color: 'secondary',
                    inverted: true,
                    options: [
                      {
                        label: 'Google',
                        value: 'go'
                      },
                      {
                        label: 'Facebook',
                        value: 'fb'
                      }
                    ]
                  }
                }
              }
            ],
diegomagikal commented 5 years ago

PS: If I change the imports order, the error disappears but nothing is rendered.

import VueFormly from 'vue-formly'
import QFormly  from '@decision6/q-formly'
import VueFormlyQuasar from '@decision6/vue-formly-quasar'