Error when calling some components



  • 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
    0_1501246761682_codigo1.png

    The call of the components in main.js
    0_1501246826855_main.png



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



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



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



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



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

    <script>
    import CpTitulo from '…/…/modulo/titulo/titulo.vue’
    import QInput from ‘quasar’

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



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



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



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



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



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



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

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


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



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


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



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



  • 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



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



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