Question

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

所以我在文件夹＆＃34; navBar＆＃34;中创建了一个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)
  }

}

但是当我点击＆＃34;第1项＆＃34; 时，我收到错误：

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

我无法解释为什么，任何想法？

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

Answer 1

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

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

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.

财产或方法＆＃34; handleSelect＆＃34;未在实例上定义，但在呈现期间引用

1 个答案: