Missing required prop: "icon" (found in component <q-small-fab>)



  • I am doing this in a single file vue component:

         <q-fab
           class="absolute-bottom-right"
           @click="alert()"
           classNames="primary"
           active-icon="alarm"
           direction="up"
           style="right: 18px; bottom: 18px;"
         >
           <q-small-fab class="white" @click.native="$refs.drawerleft.open()">
             mail
           </q-small-fab>
         </q-fab>
    

    And then get this error in the browser:

    [Vue warn]: Missing required prop: "icon" 
    (found in component <q-small-fab>)
    warn @ vue.runtime.common.js?d43f:521
    assertProp @ vue.runtime.common.js?d43f:1285
    validateProp @ vue.runtime.common.js?d43f:1238
    Vue._updateFromParent @ vue.runtime.common.js?d43f:2539
    prepatch @ vue.runtime.common.js?d43f:2791
    patchVnode @ vue.runtime.common.js?d43f:4387
    updateChildren @ vue.runtime.common.js?d43f:4314
    patchVnode @ vue.runtime.common.js?d43f:4398
    updateChildren @ vue.runtime.common.js?d43f:4314
    patchVnode @ vue.runtime.common.js?d43f:4398
    patch @ vue.runtime.common.js?d43f:4523
    Vue._update @ vue.runtime.common.js?d43f:2497
    (anonymous) @ vue.runtime.common.js?d43f:2464
    get @ vue.runtime.common.js?d43f:1661
    run @ vue.runtime.common.js?d43f:1730
    flushSchedulerQueue @ vue.runtime.common.js?d43f:1544
    (anonymous) @ vue.runtime.common.js?d43f:473
    nextTickHandler @ vue.runtime.common.js?d43f:422
    

    What am I doing wrong?



  • A guess on my part, but you might need the icon property too?

         <q-fab
           class="absolute-bottom-right"
           @click="alert()"
           classNames="primary"
           icon="some_other_icon"
           active-icon="alarm"
           direction="up"
           style="right: 18px; bottom: 18px;"
         >
           <q-small-fab class="white" @click.native="$refs.drawerleft.open()">
             mail
           </q-small-fab>
         </q-fab>
    

    Notice: icon="some_other_icon"

    Edit: Hmm…looking at the docs, “add” should be the default. I would say, if you add the icon attribute, and it works, there is probably a bug in that component.

    Scott


  • Admin

    Documentation is partially outdated. My fault. Use “icon” prop instead of specifying the icon as default slot.


  • Admin

    If you click on View Source then it will show you the correct way to deal with this ;)



  • Great! Thanks. Of course I better look into the source…, here it is:
    https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/web-components/fab.vue



  • Oops. I put the “icon” in the wrong place.

    Should have been:

         <q-fab
           class="absolute-bottom-right"
           @click="alert()"
           classNames="primary"
           active-icon="alarm"
           direction="up"
           style="right: 18px; bottom: 18px;"
         >
           <q-small-fab class="white" @click.native="$refs.drawerleft.open()"  icon="some_other_icon">
             some-button
           </q-small-fab>
         </q-fab>
    
    

    Right?

    Scott


  • Admin

    Yes, without “some-button” as default slot :)
    Made this change so you can for example use a Popover or a Tooltip on the small fab ;)


Log in to reply
 

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