Cannot read properties of undefined (reading 'showMenu')

[clabnet]

Hi, my code is a Vue3 Typescript Vite project with composition API with script setup on top, then I have not this.$refs
I would attach a right click menu on a div named box.
Right clicking on the box container I have this error: Cannot read properties of undefined (reading 'showMenu')

Can you suggest me please a solution ? Thanks in advance.

<script setup lang="ts">
import { ref } from 'vue'
const box = ref(null)
const optionsArray = [
  {  name: 'Edit node',   slug: 'edit'  }
]
function optionClicked(event) {
  window.alert(JSON.stringify(event))
}
function handleRightClick(event: any, item: any) {
  console.log('Right click on', item)
  box.value.vueSimpleContextMenu1.showMenu(event, item)       <<<--- Here I have a problem Object box.value is possibly 'null'.ts(2531) 
}
</script>

<template>
  <div ref="box" @contextmenu.prevent.stop="handleRightClick($event, 'a text')">
   <vue-simple-context-menu
      ref="box"
      element-id="myFirstMenu"
      :options="optionsArray"
      @option-clicked="optionClicked"
    />
  </div>
</template>

The Vite plugin :

import VueSimpleContextMenu from 'vue-simple-context-menu'
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'
import type { UserModule } from '../types'

export const install: UserModule = ({ app }) => {
  console.log('loading context menu')
  app.component('VueSimpleContextMenu', VueSimpleContextMenu)
}

[johndatserakis]

Hey there - sorry I don't use Vue3 very much so I don't know the answer off the top of my head.

In doing some research I've found a few pages that are perhaps worth visiting:

• $refs and the Vue 3 Composition API
• How to get $refs using Composition API in Vue3?

A example method shown is:

<template>
    <div ref="table"/>
</template>

import { ref, onMounted } from 'vue';

setup() {
    const table = ref(null);

    onMounted(() => {
      console.log(table.value);
    });

    return { table };
}

You may be able to take that route. Hopefully this helps.

[johndatserakis]

If you're still running into this issue, please reopen the thread, thanks.

[AlanGreyjoy]

I tried the above articles too. I don't use vue3 either, but need to now.

const vueSimpleContextMenu = ref(null);

onNodeContextMenu((e) => {
  e.event.preventDefault();
  vueSimpleContextMenu.value.showMenu(e.event, e.node)
});

const optionClicked = (event) => {
  window.alert(JSON.stringify(event))
};

Throws vueSimpleContextMenu.value.showMenu is not a function.

I can't for the life of me understand why. I am 1000% hating the composition api!

[AlanGreyjoy]

Looks like this will help you with vue3 (defineExpose).
https://stackoverflow.com/questions/64889756/calling-method-on-child-component-composition-api

What a pain.