The @Prop property decorator in Vue cannot be utilized as it is not compatible

I have a Vue 2 component with TypeScript:

import Vue from 'vue';
import Component from 'vue-class-component';
import Prop from 'vue-property-decorator';

@Component({
  template: require('./template.html'),
})

export class SuklTableApprComponent extends Vue {

  @Prop()
  type: any;

  @Prop()
  data: any;

  mounted() {}

}

Despite following the documentation, I am facing an issue where TypeScript is not recognizing the @Prop decorator. It shows the following error message:

TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof "/home/tomasturan/programming/sukl/reg-dis-forms-v2/node_modules/vue-property-decorator/li...' has no compatible call signatures.

Can someone explain why this error is happening? I have another project with similar setup where everything works fine. What could be causing this error?

typescriptvue.jsvuejs2decoratorvue-component

Answer №1

It seems like the issue lies within your import statement.

import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator'; // There is no default import, make sure to use { Prop } when importing the decorator

@Component({
  template: require('./template.html'),
})
export class SuklTableApprComponent extends Vue {

  @Prop()
  type: any;
  @Prop()
  data: any;
  mounted() { }

}

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

Expanding IntelliSense and helpful tooltips in VSCode for JavaScript and TypeScript by utilizing Node.js for a deeper understanding

As a beginner in programming, specifically in JS/TS, I've been experimenting with node.js and have encountered a puzzling issue with the IntelliSense or 'helptext' feature in VSCode. For instance, when attempting to use fs.open(), I receive ...

javascriptnode.jstypescriptvisual-studio-code

Tips on integrating ActiveX controls in Angular

I built my project using Angular 6 and TypeScript in Visual Studio Code. The browser being used is IE11. Unfortunately, when I try to run the code written in app.component.html, it doesn't work as expected. The HTML code causing the issue is: <d ...

angulartypescript

What prevents me from employing my nestjs unique decorator within a constructor?

I am looking to develop a personalized decorator that fetches tenant information. This is the current code snippet I have: export type TenantInfo = { token: string id: string } export const TenantInfo = createParamDecorator( (data: unknown, cont ...

node.jstypescriptnestjs

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

ioscssangulartypescriptionic-framework

Exploring methods for testing React components with TypeScript's props

I am currently tackling a react-typescript project and I am looking to conduct testing on props passed to a react component using react-testing library. Here, we have the SharedDashboardUiLatestValueWidget.tsx component: export interface SharedDashboardU ...

reactjstypescriptunit-testingtestingreact-props

Problem with spawning Python when using VUE2, Electron, and Flask

After completing my first project using Vue, Electron, and Flask, I am encountering difficulties packaging it. While everything works perfectly with "npm run electron:serve," there seems to be an issue when running "npm run electron:build" as Flask is not ...

vue.jsflaskelectronchild-processspawn

A combination of MVC6, tsd, and typings has proven to be

Given that TSD has been officially deprecated, I am looking towards the future and seeking guidance on how to use typings in the MVC6 framework. Any advice or tips would be greatly appreciated. I attempted following a tutorial from the typings website, wh ...

asp.nettypescriptasp.net-core-mvctsd

Exploring Angular: Looping through an Array of Objects

How can I extract and display values from a JSON object in a loop without using the keyValue pipe? Specifically, I am trying to access the "student2" data and display the name associated with it. Any suggestions on how to achieve this? Thank you for any h ...

javascriptangularjstypescript

Vue: Utilizing computed properties to monitor changes in offsetHeight of elements

I am working on a component that requires an array of 50 objects to be passed as a prop. <template> <div v-for="(item,index) in items" ref="items" :key="index"gt; // </div> </template> props: ...

javascriptvue.jsvuejs2

Switch over to TypeScript - combining Socket.IO, Angular, and Node.js

This is the code I'm using for my node server: import http from 'http'; import Debug from 'debug'; import socketio, { Server } from 'socket.io'; import app from './app'; import ServerGlobal from './serve ...

javascriptnode.jsangulartypescriptsocket.io

Blazor - The Vue Watch for Parameters: Unleashing the Power of Blazor

Transitioning from a background in VueJS to Blazor, I am struggling to locate a comparable feature to the Vue watcher in Blazor. Allow me to explain further. In Vue, one has the ability to monitor changes on a specific property, like so: watch: { somet ...

vue.jsblazor

Deliver router services for central Angular 2 elements

I am working on an ng2 app where I have the app/app.module and core/core.module. In the core modules, there are some modules that are used at the app top level and only once as mentioned in the official documentation. However, one of these modules requires ...

angulartypescript

Enforcing alias types in TypeScript arguments is necessary for maintaining consistency and clarity

I'm currently facing a challenge with type unions and aliases. I have an alias for values that can possibly be null or undefined, along with a function that handles these values. Everything is running smoothly and safely. However, there are instances ...

typescript

A guide on renewing authentication tokens in the Nestjs framework

import { ExtractJwt, Strategy } from 'passport-jwt'; import { AuthService } from './auth.service'; import { PassportStrategy } from '@nestjs/passport'; import { Injectable, UnauthorizedException } from '@nestjs/common&apo ...

javascriptnode.jstypescriptpassport.jsnestjs

Updating a global variable in Ionic 3

I recently started exploring the world of Ionic, Angular, and TypeScript. I encountered a scenario where I needed to have a variable "ar: AR" accessible across all pages. To achieve this, I decided to make it a global variable by following these steps: Fi ...

angulartypescriptionic-frameworkglobal-variables

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

Adding a Third-Party JavaScript Plugin to Angular 7

I've been attempting to integrate the read-excel-file JavaScript plugin into my Angular 7 project. Despite following all the methods recommended on various websites, I have yet to succeed. Could anyone provide a better solution? declare var readXlsx ...

angulartypescriptpluginsecmascript-6

Is the Vue-portal enabled conditionally?

I am looking to include some additional information in the navbar (parent component) using Vue Portal. So, within a component, I can use the following code: <portal to="navbar"> <b-button>Some option</b-button> </portal&g ...

javascriptvue.jsvue-portal

Updating Vue component properties with data obtained from an external source

Vue.component('unique', { template: `some custom html`, data() { { return { uniquedata: 'hello, beginning!' } } }, methods: { retrieveData: function fetchData() { fetch('http://localhos ...

vue.js

Vue 3: Utilizing the v-once directive within a for loop results in the display of

Am I making a mistake or is this a bug? It seems like a bug. The code below is displaying 2 divs with the same text: 'test1'. This is because of the 'v-once' directive. Each div should display a unique string instead. <script setup&g ...

vue.jsvuejs3