During rendering, the instance attempts to reference the "handleSelect" property or method which is not defined

I've incorporated the Element-UI NavMenu component into my web application to create a navigation bar using Vue.JS with TypeScript.

In order to achieve this, I have created a Vue component within a directory called "navBar," which contains the following:

The navBar.vue component:

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

The content of 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 code in 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)
  }

}

However, upon clicking on "Item 1," I encounter an 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'm puzzled by this issue and would appreciate any insights or suggestions.

I've reviewed similar queries like this one, but none seem to address the use of TypeScript specifically.

typescriptvue.jselement-ui

Answer №1

The absence of the @Component decorator implies that the NavBar class may not be configuring the methods for the Vue instance correctly.

To rectify this, add the decorator above 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)
  }

}

Refer to the GitHub repo's README for the vue-class-component module for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exposing the method to the outside world by making it public in

I have a situation where I have a base class with a protected method called foo, and a child class that needs to make this method publicly accessible. Since this method will be called frequently, I am looking for a more efficient solution to avoid unnecess ...

typescript

What is the best way to create a function that can identify and change URLs within a JSON file?

I'm currently working on a function that will replace all URLs in a JSON with buttons that redirect to another function. The modified JSON, complete with the new buttons, will then be displayed on my website. In my component.ts file, the section wher ...

jsonangulartypescriptbutton

Can you explain the significance of using curly braces in an import statement?

The TypeScript handbook has a section on Shorthand Ambient Modules, where an import statement is shown as: import x, {y} from "hot-new-module"; It doesn't explain why y is in curly braces in the above statement. If both x and y were inside the brace ...

typescript

Using *ngFor to populate an array in an ion-list within Ionic 2

Hi there, I'm currently learning Ionic 2 and I recently created an array that I want to loop through in an ion-list. This is my produk.ts import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angul ...

angulartypescriptionic2

Create a new project using Firebase Functions along with a Node.js backend and a React.js frontend

In the process of developing my application, I have chosen to utilize node.js, express.js, and Firebase with firebase functions, all coded in TypeScript. For the client side framework, I am interested in incorporating react.js. Currently, I have set up nod ...

node.jsreactjstypescriptfirebaseexpress

Develop a worldwide computed attribute within a plugin on Vue 3

I'm attempting to establish a universal computed property within a Vue 3 plugin in order for my property to be utilized reactively across any component. I am adhering to the standard Vue 3 pattern: app.config.globalProperties.$foo = ... This method a ...

vue.jsvue-componentvuejs3computed-properties

Jest's expect method fails to capture errors thrown by async/await functions

I'm currently experimenting with a TypeScript-Express application that utilizes MongoDB and Mongoose. To perform testing, I have integrated jest and mongo-memory-server into the project. While I have succeeded in testing the insertion of new documents ...

typescriptexpressjestjsintegration-testingsupertest

Bringing in additional elements, ensure that there is only a single main root element

Apologies for the beginner question. I am facing an issue while trying to display a .vue file with parent and children components, resulting in a "more than one root element" error. It seems strange to me because the imported components are supposed to be ...

javascriptvue.js

Guide to Implementing StoreApi in Zustand LibraryLearn how to utilize Store

While reading the documentation for zustand, I came across a useful piece of information. In addition to the standard `set` and `get` parameters, there is an extra parameter called `api` in the StateCreator function. Check out the example below: import cr ...

reactjstypescriptzustand

Utilize or Bring in an external JavaScript file within Ionic 2

Currently working with Ionic 2 and Typescript Angular 2 and facing an issue. I need to utilize an external JavaScript file located at . How can I import or include this in my project? ...

javascriptangulartypescriptionic2ionic3

Encountering the error message "Error: 'preserveValueImports' is an unknown compiler option" while setting up a SvelteKit project

https://i.stack.imgur.com/fnidk.png Every time I set up a new sveltekit project using TypeScript, I keep encountering the error "Unknown compiler option 'preserveValueImports'.ts" in the tsconfig.json file. The error shows up above the line wher ...

node.jstypescriptnpmsveltesveltekit

Next.js routes taking precedence over storybook routes

I recently completed a storybook project. Now, I am looking to integrate it with another project built on next.js. The issue is that Storybook and next.js each have their own set of routes. I want to streamline the routing process by utilizing next.js and ...

reactjstypescriptnext.jsstorybook

ESLint encountering a "Module path unresolved" issue in conjunction with SAM Serverless Monorepo

In the process of developing a basic Hello World function for AWS Lambda/APIGateway, I aim to integrate ESLint and Typescript features. Typically, when working with Typescript and ESlint, inclusion of the eslint-plugin-import package and specifying the ext ...

typescripteslintserverlesstypescript-eslint

Performing actions in Vue JS when a Modal is opened

I need to load data into my form when a specific link is clicked. The link has an ID, but the ID may change after the page loads. How do I ensure that my method runs only when the modal associated with the link is opened? My goal is to execute the setData ...

vue.jsvuejs2

Creating a TypeScript interface that has keys determined by the elements in an array

My goal is to create a function that returns a record with keys specified by a string array. For example: // return type -> { itemA:SomeType,itemB:SomeType } const res = doThing(['itemA', 'itemB']) Do you think this is achievable? ...

typescript

Exploring the integration of Vue.js and Requirejs for efficient development

After creating a new Vue.js project with vue-cli and building it using the command: vue build --target lib --name myWidget src/main.js I needed to utilize Requirejs for loading: <script> requirejs.config({ paths: { ...

javascriptvue.jswebpackvuejs2

Is it possible to implement lazy loading for data in TypeScript classes?

Looking to optimize my Angular application's data structure when consuming a RESTful API. My goal is to only load necessary data from the server on demand. For instance, if I have a collection of Building objects each with a set of tenant IDs in an a ...

angularresttypescript

Inheriting an Angular 5 class with injected dependencies

I recently defined a new class @Injectable FooService { constructor(private _bar:BarService){ } } Then I decided to extend it in the following way @Injectable ExtFooService extends FooService { constructor(private _bar:BarService){ ...

typescriptdependency-injectionangular5extends

Optimize Next.js 10 TypeScript Project by Caching MongoDb Connection in API Routes

I am currently in the process of transitioning next.js/examples/with-mongodb/util/mongodb.js to TypeScript so I can efficiently cache and reuse my connections to MongoDB within a TypeScript based next.js project. However, I am encountering a TypeScript err ...

mongodbtypescriptnext.js

Tips for deleting a hashtag from a URL

import router from './router' Vue.use(router) new Vue({ el: '#app', router, template: '<App/>', components: { App } }) In my main.js file, I have this code snippet. In another file name ...

vue.jsvuejs2vue-componentvue-router