[Solved] Error when calling some components

tonpereira

I have a problem. When I try to put the input component it says I did not register correctly, however I have all the components registered in main.js and the select component works and collapsed also, but some components have the same problem, I tried to make the call Individual from the single component in the .vue file, but does not work either.

Follows error field input field
0_1501246711464_erro 1.png

His call in the file vue

The call of the components in main.js

a47ae

Hm… your import looks alright, but what seems odd is line 20 from your second screenshot, there you are closing a nonexisting q-field tag.

JCharante

@a47ae Good catch. @tonpereira seems to be closing a nonexistant q-field tag instead of closing the q-input tag. Do let us know if that solves the problem @tonpereira

tonpereira

Thank you! @a47ae and @JCharante
I had not noticed that I had this error, but it did not work!
In the documentation tells me that I can input the input

<! - Single Line Input ->
<Q-input v-model = “text” />

Http://beta.quasar-framework.org/components/input.html

But when I put it that way it still gives the same error, I tried to close the tag so

<Q-input v-model = “text”> </ q-input>

But it still does not work.

a47ae

Could you please try and explicitly importing QInput in contato.vue (and of course, register it in the componentssection) and tell us the result?

tonpereira

I did the component import in vue. As the image below shows and now the following error appears.
"Failed to mount component: template or render function not defined.

export default {
  data () {
    return {
      dadostitulo: {
        titulo: 'AGENDAMENTO ELETRÔNICO DE ATENDIMENTO',
        subtitulo: 'Contato'
      },
      text: ''
    }
  },
  components: {
    CpTitulo, QInput
  },

…

a47ae

Hmm… It’s kinda hard to debug without the whole component, can you post the full file in the forum (please use ``` at the start and end of the block to format it) or when it is too large post it on https://pastebin.com/

tonpereira

@a47ae segue o codigo do componente todo
https://pastebin.com/raw/aivmrFaU

a47ae

Thanks, I found the error, please change your import statement in line 59 to import { QInput } from 'quasar'

tonpereira

I did it this way and I continue without displaying the input and with the same error.

Unknown custom element: <q-input> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

a47ae

Okay, it worked for me, so the error must be in another file.

rohityadav

@tonpereira you need to add this code in your contato.vue

<script>
import {
  QInput
} from 'quasar'

export default {
  components: {
    QInput
  },
  data () {
    return {
      text: ''
    }
  }
}
</script>

a47ae

@rohityadav I think it it already there, see the pastebin and my correction.

rohityadav

@a47ae yes i agree you are correct and i appreciated as your response and helping to others .
but missing { } es6 syntax for importing named export . So QInput should be in { }

import {
  QInput
} from 'quasar'

a47ae

@rohityadav I already corrected this error in answer 9
And as I stated, I think the error is in another file, cause with the corrected import it is working for me.

JCharante

@tonpereira You are right, I didn’t notice the /. The self closing syntax should work just fine. Have you tried to isolate the issue by creating a minimalistic repo to reproduce the error? And you’re using quasar 0.14 beta & vue 2.3.x right?

sebastien.roul

Hi,

I have the same problem, but I cant fix it globaly:
Vue.use(Quasar, { components: All, directives: All })

and error is
``
vue.runtime.esm.js?a427:475 [Vue warn]: Unknown custom element: <q-input> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

found in

—> <Index> at /projet/proto/quasar/src/components/Index.vue
<App> at /projet/proto/quasar/src/App.vue
<Root>
``

I just :

quasar init default
add the import + components
add <q-input v-model="text" />

So globally or localy, it doesnt work.
Quasar : 13.1 / Vue 2.4.2

Thx

sebastien.roul

OK, I found my mistack… I’m new with Quasar, and looking for a new UI framwork cause I’m not very satify with ElementUI.
So, I migrate my app - BUT - I read the doc of the 0.14, And the default npm install use 0.13 :o) :o)

So, I’m ready for the future

tonpereira

Thanks everyone for the help, I already found the error.

I was really trying to use the documentation for a different version of the one that was installed.

Thank you everyone for the attention!

divyats

Make sure you add the QField or QInput in components needed in quasar.config.js file

framework: {
      components: [
        'QField',
        'QInput',
        'QCard',
        'QCardTitle'
 ],

No More Posting New Topics!

[Solved] Error when calling some components