I'm using the Element-UI component NavMenu in order to create a nav bar in my web application. I'm using Vue.JS + TypeScript.

So I've created a Vue component in a folder "navBar", inside it I've:

The component navBar.vue:

<template src="http://stackoverflow.com/navBar.html"></template><script src="http://stackoverflow.com/navBar.ts" lang="ts"></script>

The html navBar.html:

<div id="navbar"><el-menumode="horizontal":select="handleSelect"background-color="rgba(95, 75, 139, 1)"text-color="#fff"active-text-color="rgba(255, 255, 255, 1)"><el-menu-item index="1">Item 1</el-menu-item></el-menu></div>

And the TypeScript navBar.ts:

import Vue from 'vue'import Component from 'vue-class-component'export default class NavBar extends Vue {handleSelect (key: string, keyPath: string) {console.log(key, keyPath)}}

But when I click on the "Item 1" I get the error:

[Vue warn]: Property or method "handleSelect" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I can't explain why, any idea?

I've already seen other questions like this but no one used TypeScript.

  • 1
    What gets generated as the JavaScript from navBar.ts? Is handleSelect in the methods?– Roy JFeb 13 at 17:28

You aren't using the @Component decorator, so the NavBar class probably isn't setting the methods for the Vue instance correctly.

Add the decorator before the class definition:

import Vue from 'vue'import Component from 'vue-class-component'@Componentexport default class NavBar extends Vue {handleSelect (key: string, keyPath: string) {console.log(key, keyPath)}}

Here's the GitHub repo's README for the vue-class-component module.

  • Thanks, I also needed to change :select="handleSelect" to @select="handleSelect", now it works correctly.– AlessandroFeb 14 at 8:59

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.