0

我正在使用Element-UI 组件 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>

和打字稿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)
  }

}

但是当我点击“项目 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。

4

1 回答 1

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

}

vue-class-component这是该模块的 GitHub 存储库的 README 。

于 2018-02-13T17:57:51.913 回答