Property or method "handleSelect" is not defined on the instance but referenced during render

Question

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="./navBar.html">
</template>
<script src="./navBar.ts" lang="ts">
</script>

The html navBar.html:

<div id="navbar">
  <el-menu
    mode="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://v2.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.

Answer 1

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'

@Component
export 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.