Open
Description
When I click on a menu item, I get the following error & stack trace, & the on-select="handleSelection"
function never works:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'key')
at renderSlot (runtime-core.esm-bundler.js:2969:57)
at vue-float-menu.es.js:1:18216
at renderFnWithContext (runtime-core.esm-bundler.js:853:21)
at renderSlot (runtime-core.esm-bundler.js:2968:55)
at vue-float-menu.es.js:1:6819
at renderFnWithContext (runtime-core.esm-bundler.js:853:21)
at normalizeChildren (runtime-core.esm-bundler.js:6925:42)
at createBaseVNode (runtime-core.esm-bundler.js:6678:9)
at _createVNode (runtime-core.esm-bundler.js:6780:12)
at createVNodeWithArgsTransform (runtime-core.esm-bundler.js:6636:12)
Here is my configuration:
<script setup>
import { FloatMenu } from "vue-float-menu";
import "vue-float-menu/dist/vue-float-menu.css";
// Floating menu data.
const menuData = [
{ name: "Dashboard" },
{
name: "Edit",
subMenu: {
name: "edit-items",
items: [{ name: "Copy" }, { name: "Paste", disabled: true }],
},
},
{divider: true},
{
name: "Open Recent",
subMenu: {
name: "recent-items",
items: [{ name: "Document 1" }, {divider: true}, { name: "Document 2" }],
},
},
];
const handleSelection = (selectedItem) => {
console.log(selectedItem);
};
</script>
<template>
<float-menu
:dimension=50
:menu-dimension="{height: 400, width: 300}"
:menu-data="menuData"
position="bottom right"
on-select="handleSelection"
>
<i class="fa-solid fa-bars"></i>
</float-menu>
</template>
Vue 3 plus Vite.