Use Vue 2 with TypeScript to prevent directly changing Props in a class-based component using vue-property-decorator

Is there a way to declare a Prop using vue-property-decorator in a class-based component without the need to initialize it?

Currently, I'm facing a dilemma:

  1. If I don't provide an initializer, TypeScript throws an error during compilation:

"TS2564 (TS) Property 'parentData' has no initializer and is not definitely assigned in the constructor."

  1. On the other hand, if I do initialize the property, VueJS issues a warning at runtime:

"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

The current solution works, but dealing with the warning is bothersome and leaves me wondering if there's a better approach:

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Client } from '../../../../domainmodels/client';

@Component({})
export default class SearchLocationsComponent extends Vue {

     @Prop() 
     parentData: Client = new Client();

}


My dependencies:   
"devDependencies": {
    "@types/webpack-env": "^1.13.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.2.2",
    "vue-loader": "^11.1.4",
    "vue-property-decorator": "^5.0.1",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2",
    "webpack": "^2.2.0",
    "webpack-cli": "^3.3.2",
    "webpack-hot-middleware": "^2.12.2"   
}
typescriptvue.js

Answer №1

If you do not set a value for a property during the construction phase, it is important to explicitly state that it may be undefined:

parentData: Client | undefined;

To assign a default value for a member decorated with @Prop, make sure to use the decorator's default parameter:

@Prop({ default: () => new Client}) 
parentData: Client | undefined;

Alternatively, although not recommended, you can include 

"strictPropertyInitialization": false
in your TypeScript compiler options.

Update 1:

The best solution for such scenarios is to utilize the definite assignment assertion modifiers, which were introduced in TypeScript 2.7. By combining this with default initialization using the Prop decorator, you should be able to solve the issue:

@Prop({ default: () => new Client }) 
parentData!: Client;

Answer №2

Perhaps I am a tad tardy, but if you're utilizing Vue with Typescript, it might be beneficial to opt for PropSync over Prop from the vue-property-decorator.

For instance, instead of:

@Prop() propArrayName!: type[];

You could use:

@PropSync('propArrayName', { type: Array }) _localArrayVariable!: type[];

This approach helps prevent mutation using Prop() and computes the prop instead... further details can be found here:

https://github.com/kaorun343/vue-property-decorator#-propsyncpropname-string-options-propoptions--constructor--constructor---decorator

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

What is the best way to identify a particular subtype of HTMLElement based on its tag name and then save that element within another one?

I have a function that generates a node and returns it. Here is an example implementation: addElement: function ({ parentNode, elementName, tagName, }) { // Creates and appends the new node. parentNode[elementName] = document.createEl ...

javascripttypescriptdom

forEach was unable to determine the appropriate data types

define function a(param: number): number; define function b(param: string): string; define function c(param: boolean): boolean; type GeneralHooks<H extends (...args: any[]) => any> = [H, Parameters<H>] const obj = { a: [a, [1]] as Gene ...

typescript

Handling an HTML Form without the Submit Button using VeeValidate

I've implemented a form handler using its composable feature in my <script setup>: const { submitForm, resetForm, handleSubmit, meta } = useForm() function save() { // Want to submit the form here submitForm() // Not working showSaveSnac ...

javascriptvue.jsvuejs3vue-composition-apivee-validate

Using the `setTimeout` function to swap components

As I work on implementing a setTimeout method, the goal is to trigger an event after a .5 second delay when one of the three buttons (drip, french press, Aeropress) is pressed. This event will replace {{ShowText}} with {{ShowText2}}, which will display &ap ...

javascriptvue.jsvue-component

Challenges with Angular observables

Struggling to make observables work has been quite the challenge for me lately. My code now resembles a chaotic battleground rather than the organized structure it once was. The dreaded "ERROR TypeError: Cannot read property 'map' of undefined" ...

angulartypescriptobservable

(Vue.js) The icon fails to be applied

<link rel="icon" href="/static/icons/apple-touch-icon.png" type="image/x-icon"> <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/ ...

htmlvue.jsicons

Utilize the TypeScript Compiler API to extract the Type Alias Declaration Node from a Type Reference Node

Currently, I am utilizing ts-morph library which makes use of the TS Compiler API. Here is an example of my code: export type Foo = string export const foo: Foo = 'bar' Whenever I try to find the type for the export of foo, it returns string. H ...

typescripttsctypescript-compiler-api

The synchronization between Typescript and the HTML view breaks down

I am currently working on an application that retrieves user event posts from MongoDB and displays them in HTML. In the Event-post.ts file, inside the ngOnInit() function, I have written code to retrieve the posts using the postsService.getPosts() method. ...

htmlangulartypescript

Mastering Vuex: effectively managing intricate data structures and dynamic state transformations

Let's say I'm utilizing an external API that interacts with Machine objects. With the API, you can create a Machine using createMachine, resulting in a complex object with various nested properties and functions to modify its state. The API inclu ...

javascriptvue.jsvuex

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Within my customer-detail component, I have implemented code that achieves the desired outcome. However, I believe there might be a more reactive and observable way to approach this task. Instead of using an if statement to set this.isLoading = true;, is ...

angulartypescriptrxjsreactive-programmingrxjs5

Solving the problem of cookieParser implementation in NestJS

Greetings! I have a question for you. Currently, I am working on developing a backend using NestJS, a Node.js framework. Everything is functioning smoothly except for some issues when it comes to hosting. I have created a new NestJS project and made some ...

typescriptcookiesnestjshostingvercel

Custom objects do not return true for Symbol.hasInstance

The TypeScript playground encounters an issue with the Symbol.hasInstance built-in symbol, while it functions properly for other symbols. Testing other symbol methods such as Symbol.match and Symbol.replace show no problems, but Symbol.hasInstance is not ...

arraystypescriptsymbols

A TypeScript function that strictly checks for tuples without any union elements

Calling all TypeScript gurus! I am currently developing a versatile TypeScript function that can handle two different types of arguments: Class A and B. A and B are completely independent and not related through inheritance. The challenge I am facing is ...

typescriptunion-typestype-declaration

Creating a fixed list with top-sticking elements on a webpage using HTML

Creating a single page webapp using Vue/Vuetify, I am facing an issue with building a list (v-list) of items on the right side that requires scrolling. Even though the list is longer than the page height, I want to prevent the rest of the page from scrolli ...

htmlcssvue.jsflexboxgrid-layout

Issue with electron-vue: Unable to modify Vuex state when using RxJS subscribe

I need help with my code involving two functions in the mutations and two pieces of state const state = { files: [], uploadProgress: 0 } const mutations = { SET_UPLOAD_IMAGE: (state, files) => { state.files = files }, UPLOAD_IMAGE: ( ...

javascriptvue.jsvuexelectron-vue

Vue.js blocks the use of iframes

I've come across a peculiar issue where I need to embed an iframe inside a Vue template and then be able to modify that iframe later. The code snippet below shows the simplified version of the problem: <html> <body> <div id="app" ...

javascriptruby-on-railsiframevue.js

How to access the dynamic route's path in Next.js when using Server Components?

Obtaining the dynamic route path in a Next JS server component poses a challenge. This task is simple when working with client components. If you are working on src/app/[id]/page.tsx "use client"; import { usePathname } from "next/navigatio ...

javascriptreactjstypescriptnext.js

Issue with Ant Design form validation

After reading through the documentation, I attempted to implement the code provided: Here is a basic example: import { Button, Form, Input } from "antd"; export default function App() { const [form] = Form.useForm(); return ( <Form f ...

javascriptreactjstypescriptvalidationantd

The Angular error message InvalidValueError is thrown when the Map function expects a mapDiv of type HTMLElement, but instead receives a

When attempting to initialize Google Maps, I encountered a particular problem. In this div, I am trying to load the map but consistently receiving the same error message. I attempted to use ngAfterViewInit() in case the view wasn't fully loaded befo ...

angulartypescriptgoogle-maps

Conflicts arising from hyphenating attributes in Vue with version 3.4 overlapping with same-name shorthand properties

In my current project, we have the vue/attribute-hyphenation eslint rule set up to require attribute hyphenation in Vue 3 components at all times. However, this causes an issue as the hyphens interfere with the new syntax introduced in Vue 3.4 for binding ...

vue.jsvuejs3eslint-plugin-vue