Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rhclayto opened this issue Aug 28, 2022 · 0 comments
Open

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

rhclayto opened this issue Aug 28, 2022 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@rhclayto
Copy link

rhclayto commented Aug 28, 2022

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.

@prabhuignoto prabhuignoto added the bug Something isn't working label Aug 29, 2022
@prabhuignoto prabhuignoto self-assigned this Aug 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants