custom components in .15, need to register?

dgk

I get this warning when using my own custom components

[Vue warn]: Unknown custom element: <q-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <QForm> at src/components/Form.vue
       <QSlideTransition>
         <QCollapsible>
           <QFormc> at src/components/CollapsibleForm.vue
             <QList>
               <Circuits> at src/pages/config/Circuits.vue
                 <QPageContainer>
                   <QLayout>
                     <LayoutDefault> at src/layouts/default.vue
                       <Root>

Not sure why I need to register this??

It is created with an render statement in Form.vue

  render (element) {
    return element('q-form', {}, this.makeForm(element))
  },
  props: ['values', 'schema'],

I did not get this warning in .14

dgk

here is where QForm is used in another custom component. Note the “components” prop registers QForm so not sure why this warning now.
It is actually rendering so why the warning??

<template>
  <div>
    <q-collapsible v-on:remove v-on:add :label="item.name">
      <q-form class="" @changed="update(item,$event)" :values="item" :schema="schema"></q-form>
        <q-btn color="positive" :disable="saved" icon="fa-save" @click="saveChanges(item)">Save Changes
          <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
           Save Changes to Server
          </q-tooltip>
        </q-btn>

        <q-btn color="warning" :disable="saved" icon="fa-trash-o" @click="discardChanges(item)">Discard Changes
          <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
           Revert to last saved changes
          </q-tooltip>
        </q-btn>

      </q-collapsible>
      <!-- q-btn class="col-2" :class= "state(item)" @click="toggle(item,index)">Test
        <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
         Click to test switch
        </q-tooltip>
      </q-btn -->
   </div>
</template>
<script>

// import api from 'src/api'

import QForm from './Form.vue'
// const service = api.service(this.service)

export default {
  data () {
    return {
    }
  },
  props: [ 'item', 'schema', 'saved' ],
  computed: {
  },
  methods: {
    saveChanges (item) {
      this.$emit('save', item)
    },
    discardChanges (item) {
      this.$emit('reset', item)
    },
    update (item, setting) {
      setting.id = item._id
      // item[setting.name] = setting.value
      // console.log('updating', item.name, setting.name, setting.value, item[setting.name])
      this.$emit('changed', { id: item._id, type: item.type, setting: setting })
      this.unsaved = true
    },
    // nameUnique (item, index) {
    //  do unique checking on loaded names
    // $q.notify.create.negative('Need to Check for Unique Name')
    // },
    state (item) {
      if (item.on) { return 'on' } else { return 'off' }
    }
  },
  components: {
    QForm
  }
}
</script>

<style lang="stylus">

@import '~variables'

.on
    background $positive

.off
    background grey


</style>

dgk

hmmm…kinda silent in the forum lately…anyway

I did track down the reason for the warning and it’s a bit strange why.

for some reason vue and vue-loader does not like having the render element function argument for the tag be the same as how you import.

so if simply change

  render (element) {
    return element('q-form', {}, this.makeForm(element))
  },

to

  render (element) {
    return element('form', {}, this.makeForm(element))
  },

Then I can use that in my other component renaming it to QForm and I can use it that way (or any import name since it is a default export)
and the warning goes away. I suspect that using default instead of named export can create this warning (but why? why does it matter)

<template>
  <div>
    <q-collapsible v-on:remove v-on:add :label="item.name">
      <q-form class="" @changed="update(item,$event)" :values="item" :schema="schema"></q-form>
        <q-btn color="positive" :disable="saved" icon="fa-save" @click="saveChanges(item)">Save Changes
          <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
           Save Changes to Server
          </q-tooltip>
        </q-btn>

        <q-btn color="warning" :disable="saved" icon="fa-trash-o" @click="discardChanges(item)">Discard Changes
          <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
           Revert to last saved changes
          </q-tooltip>
        </q-btn>

      </q-collapsible>
      <!-- q-btn class="col-2" :class= "state(item)" @click="toggle(item,index)">Test
        <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
         Click to test switch
        </q-tooltip>
      </q-btn -->
   </div>
</template>

<script>

import QForm from './Form.vue'

export default {
  components: {
    QForm
  },

No More Posting New Topics!

custom components in .15, need to register?