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 :slight_smile:
    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!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.