Skip to content

e.component is not a function #1

@diegomagikal

Description

@diegomagikal

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'
                      }
                    ]
                  }
                }
              }
            ],

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions