属性或方法 "handleSelect" 未在实例上定义但在渲染期间被引用

Question

我正在使用 Element-UI component NavMenu 在我的 Web 应用程序中创建导航栏。我正在使用 Vue.JS + TypeScript。

所以我在文件夹 "navBar" 中创建了一个 Vue 组件，我在其中：

组件navBar.vue:

<template src="./navBar.html">
</template>
<script src="./navBar.ts" lang="ts">
</script>

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>

和 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)
  }

}

但是当我点击 "Item 1" 时，出现错误：

[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.

我无法解释为什么，有什么想法吗？

我已经看过其他问题，例如，但没有人使用 TypeScript。

Answer 1

您没有使用 @Component 装饰器，因此 NavBar class 可能没有正确设置 Vue 实例的方法。

在class定义之前添加装饰器：

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.

属性或方法 "handleSelect" 未在实例上定义但在渲染期间被引用

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

typescript

vue.js

element-ui

属性 或方法 "handleSelect" 未在实例上定义但在渲染期间被引用

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

typescript

vue.js

element-ui

属性或方法 "handleSelect" 未在实例上定义但在渲染期间被引用