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

[MusicForMellons]

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?

[s.molinari]

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

[rstoenescu]

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

[rstoenescu]

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

[MusicForMellons]

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

[s.molinari]

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

[rstoenescu]

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