How to keep FAB Speed Dial open when clicking its buttons

Question

I want to have toggles and zoom in/out buttons in my Vuetify FAB Speed Dial. My problem is that the FAB speed dial 'menu' closes as soon as the user clicks one of the FAB buttons, forcing them to re-open the menu for each click on e.g. the 'zoom out' FAB button.

This is my speed dial. I want to the user to be able to click on the zoom buttons multiple times without the menu closing after each click. When they are done, they should click on the 'close' button to manually close the speed dial menu.

<v-speed-dial v-model="fab" fixed bottom right direction="top">
    <template v-slot:activator>
        <v-btn v-model="fab" fab>
            <v-icon v-if="fab">close</v-icon>
            <v-icon v-else>more_vert</v-icon>
        </v-btn>
    </template>
    <v-btn fab @click="addPhoto">
        <v-icon large>add_photo_alternate</v-icon>
    </v-btn>
    <v-btn fab @click="zoomIn">
        <v-icon large>zoom_in</v-icon>
    </v-btn>
    <v-btn fab @click="zoomOut">
        <v-icon large>zoom_out</v-icon>
    </v-btn>
</v-speed-dial>

I have tried to use :value="fab" instead of v-model="fab". Using the Vue Inspector, I can see that the fab value stops changing, but the menu still opens and closes as before.

Answer 1

I found the answer. Sharing it here in case someone else needs to know.

<v-btn fab color="blue" @click.stop="zoomOut">
    <v-icon large>zoom_out</v-icon>
</v-btn>

The secret is to add the .stop on the click event. Simple!