Vue.js - Prop validation error: The prop "page" expects a value of type DocumentPageDto, but received an Object instead

My component PageViewer has props defined like this:

props: {
    page: DocumentPageDto,
  },

I'm using it in another Vue component like this:

<div><PageViewer :page="selectedPage"></PageViewer></div>

The value of selectedPage comes from an API response, which results in this warning in the console:

Invalid prop: type check failed for prop "page". Expected DocumentPageDto, got Object

I understand that the API response is just a standard Object. I'm wondering if there is a way in Vue to handle this without changing the prop declaration to Object for intellisense.

Is there a way in Vue to manage this issue and possibly ignore the type check?

Thank you

Answer №1

Rather than defining props in the traditional way

props: {
   item: ItemDto,
}

You can utilize a property and use the @Prop decorator from the vue-property-decorator library for better functionality.

@Prop()
element: ElementDto = null;

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

Unable to retrieve the reflective metadata of the current class instance

Is it possible to retrieve the reflect-metadata from an instance of a class? The documentation provides examples that suggest it should be achievable, but when I attempt to do so, I receive undefined as a result. Strangely enough, when I request the metada ...

Modifying state within reducers is not allowed

Encountered the following error while using @ngrx/store: index.js?4b23:19 State mutation is prohibited inside of reducers. (anonymous) @ index.js?4b23:19 (anonymous) @ index.ts:54 rootReducer @ index.ts:70 _initialStateFactory @ ng2.ts?2a33:24 AppModule ...

What is the best approach for maximizing productivity: placing the script or the template first in a single file component?

When it comes to coding single-file components efficiently, there's no strict rule about how to organize them. The style guide suggests that template, script, and style tags should be consistently ordered, with style last because either template or sc ...

@ViewChild not getting initialized in ngOnInit lifecycle hook

I have encountered an issue with my two MatTables in separate components, each using data sources from different observables. One of the tables has a functioning sort feature, but the other seems to have a problem with the @ViewChild for MatSort not initia ...

Navigating external pages with Vue Router

Could really use some assistance. I've got a JSON file filled with various URL links, some internal and some external. This is what the JSON structure looks like: [ {stuff..., "Url":"https://www.google.com/", stuff..}, {stuff... ...

What could be the reason for the click event returning undefined?

I can't seem to pass a date from a mat-option choice as it returns undefined when I try to log the event in the click method. How can I solve this issue? HTML <mat-drawer-content class="Font"> <mat-form-field appearance=& ...

AngularTS - Using $apply stops the controller from initializing

Every time I launch the application, the angular {{ }} tags remain visible. Removing $scope.$apply eliminates the braces and displays the correct value. I am utilizing Angular with Typescript. Controller: module Application.Controllers { export class Te ...

Array of React components with covariant types

I have a custom class that extends a base class and combines the properties of both. Here is an example: interface BaseFooProps { name: string; } type BaseFoo<T extends BaseFooProps = BaseFooProps> = React.FC<T & BaseFooProps>; const Base ...

TypeScript treats merged interfaces as being of the type never

I combined several interfaces to create a new type. But for some reason, TypeScript is treating my type as never. Can you help me figure out why? type OrganizationAccount = Account & DetailedAccount & AccountSelection; interface Account { name: ...

The challenge of injecting services into Jest test cases using Angular 17 Functional Resolver

Overview Greetings, I am currently in the process of updating my Angular application from version 14 to version 17. One of the tasks involved in this update is replacing the deprecated Resolver classes with the new ResolverFn implementation. The challen ...

Ensuring page is fully loaded in a Bootstrap application using Protractor

What is the best approach for waiting for page load in a Bootstrap App while using Protractor? I've been searching for helpful information but haven't found much. ...

Exploring ways to destructure the useContext hook with a null default value in your Typescript code

Initially, I set up a context with a null value and now I am trying to access it in another component. However, when I destructure it to retrieve the variables from the context, I encounter a TypeScript error: Property 'users' does not exist on ...

What is the best way to transfer data from a component to a .ts file that contains an array?

I am currently developing a budgeting application and I have a component that is responsible for holding values that I want to pass to an array stored in a separate file. While I can retrieve data from the array, I am facing difficulty in figuring out how ...

Integrating an external JavaScript library into the codebase

I created a web radio player using Vue Cli and now I need to incorporate a new feature with an external library, specifically designed for handling audio advertisements. The catch is that this library must be loaded from a remote server and cannot be simpl ...

Tips for setting up a webpacked vue.js application with an express/koa backend!

Struggling with setting up a vue.js project for easy debugging in combination with a koa server? The cross-env NODE_ENV=development webpack-dev-server --open --hot command from the webpack-simple generated configuration looks promising, but how should it b ...

Angular 2: Integrating a service into a class

I am working on an Angular class that represents a shape. My goal is to be able to create multiple instances of this class using a constructor. The constructor requires several arguments that define the properties of the shape. constructor(public center: ...

Encountering an Uncaught Exception while trying to import a Vue component onto my website

I am facing an issue on my page where I am loading certain JavaScript files. The files being loaded are: Vue.js app.js The app.js file has been compiled using webpack and includes a NPM component from @chenfengyuan/vue-countdown. My goal is to display a ...

Tips for maximizing the functionality of writable computed properties

Within this code snippet, I am attempting to modify the reference value of the constant 'title' inside the computed setter. By doing so, I anticipate a change in the value of 'title' when the computed function is initiated. <template ...

Vue.js and the hidden input value that remains unseen

I am currently developing a shopping list application using Vue.js and I was wondering if there is a conventional method to achieve my requirements. My app consists of a list of items with add and delete buttons: https://i.stack.imgur.com/yQfcz.png const ...

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

After experiencing slow Typescript compilation times, I decided to utilize generateTrace from https://github.com/microsoft/TypeScript/pull/40063 The trace revealed that a significant amount of time was spent comparing intricate classes with their subclass ...