Skip to content

TypeError: Cannot read properties of null (reading 'key') #62

Open
@rhclayto

Description

@rhclayto

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions