The Vue Prop does not have an initializer and is not explicitly assigned in the constructor

Currently, I am utilizing props in Vue Class components. Within the constructor, I have defined the props without a value. This setup compiles and operates smoothly, except after the most recent VS Code / TSLint update, a warning message emerges:

The property 'tag' does not have an initializer and is not definitively assigned in the constructor.

Vue Class Component

export default class Browser extends Vue {
  @Prop({default: '', required:false})
  tag: string

  created(){
     console.log("the tag prop is " + this.tag)
  }
}

Should I choose to assign a value, I receive a Vue warning cautioning against directly modifying a Prop in a child component.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

Given that this appears to be primarily a linting issue, is there a way to deactivate this warning? Or is my code structure fundamentally incorrect?

Answer №1

If you're facing this issue, there's no need to disable

strictPropertyInitialization": false
.

As mentioned on this specified page within the Microsoft TypeScript-Vue-Starter repository:

The properties are set by using the @Prop() decorator from the vue-property-decorator library. Since the --strictPropertyInitialization flag is activated, we must inform TypeScript that Vue will handle the initialization of our properties by adding a ! at the end of them. This indicates to TypeScript that someone else will assign a value to this property.

To resolve this, simply add the ! symbol to the prop name:

@Prop({default: '', required:false})
  tag!: string

Answer №2

Updated on 2020/06/15

Upon further review, I realized that my initial solution was only temporary and not the correct approach. The correct method can be found in this answer; Simply add a ! after the prop name.

Original Solution

I encountered the same issue and resolved it by including

"strictPropertyInitialization": false,
in tsconfig.json's compilerOptions.

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "strictPropertyInitialization": false,
        "lib": [
            "es5",
            "es2015",
            "dom",
            "ScriptHost"
        ]
    },
    "include": [
        "./src/**/*"
    ]
}

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

When utilizing express-handlebars to render, the error message "req.next() is not a valid function

Trying to display the login page of a web application. Developed using TypeScript, node.js, express, and express-handlebars The code being executed is as follows: import exphbs = require("express-handlebars"); import cookieParser = require(&quo ...

Steps for deploying a Vue JS website to an Ubuntu based VPS

I currently have a VPS running on Linux Ubuntu with two websites and two corresponding domain names. One of my websites, trail-notes.tk, is successfully deployed and running on the server without any port configurations in the config file. The issue arises ...

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

I am currently in the process of transitioning my Vue.js components to TypeScript. In accordance with the recommendations provided in the documentation, I attempted to utilize Vue.extend() for my component implementation. The code snippet for my component ...

Utilizing Props in Data and Methods in Vue.js

As a newcomer to Vue.js, I am encountering an issue when passing data from a parent component to a child component using props. While I can access the data in the child component, I'm facing difficulties when trying to use it within the child componen ...

Select a single radio button containing values that can change dynamically

<input type="radio" on-click="checkDefaultLanguage" id="checkbox" > [[names(name)]] This custom radio input field contains dynamic values and I am attempting to create a functionality where only one radio button can be selected at a time while dese ...

Setting up "connect-redis" in a TypeScript environment is a straightforward process

Currently, I am diving into the Fullstack React GraphQL TypeScript Tutorial I encountered an issue while trying to connect Redis with express-session... import connectRedis from "connect-redis"; import session from "express-session"; ...

Encountering a Typescript error with Next-Auth providers

I've been struggling to integrate Next-Auth with Typescript and an OAuth provider like Auth0. Despite following the documentation, I encountered a problem that persists even after watching numerous tutorials and mimicking their steps verbatim. Below i ...

Ways to ensure that your Angular component.ts file is executed only after the body has completely loaded without relying on any external

I am attempting to add an event listener to an element created with a unique identifier using uuid, but I keep getting an error that states "Cannot read properties of null (reading 'addEventListener')" export class CommentItemComponent implements ...

Having trouble accessing undefined properties? Facing issues with the latest Angular version?

Why am I encountering an error and what steps can be taken to resolve it? Currently using the latest version of Angular. ERROR TypeError: Cannot read properties of undefined (reading 'id') Here is the JSON data: { "settings": [ { ...

What is the process for loading a model using tf.loadModel from firebase storage?

I'm currently working on an app using the ionic3 framework that recognizes hand-drawn characters. However, I am encountering difficulties with importing the model into my project. The model was initially imported from Keras and converted using tensorf ...

Exploring the power of the spread operator in event listeners within VueJS 2 and JSX

Let me simplify my issue for you: render (h) { let events = {onClick: handleClick} return (<div {...events}></div>) } The onClick event did not get added to the div element. The spread operator works well with class and style attributes b ...

The $refs property in Vue.js appears empty because of the v-if directive

I have a Vue component that showcases an address but transforms into a form to edit the address upon user interaction. The address input utilizes Google Maps API for autocompletion. Since the input field is hidden or non-existent half of the time, I need t ...

What are the steps to expand the express object with TypeScript?

I am facing an issue where, after compiling a typescript project, the express import import {Request, Response} is not showing up. I am now attempting to use require, but I am unsure of how to extend the express object and utilize req and res. Any assistan ...

What is the method for retrieving the bound key of a Vue.js list item?

In Vue, when using a v-for directive without providing a key for list items, a warning is displayed. By adding a key like this: <MyComponent v-for="item in items" :key="item.someProp" /> the warning disappears. But how can you access that key withi ...

Explore vue3 components using vue-test-library and universal components

I started creating unit tests for a production app using jest, @testing-library/vue, and supporting libraries. The first test I created is as follows: import vue from "vue"; import { render } from "@testing-library/vue"; import LibBtn f ...

Showing the contents of a 2D array using Vue

I'm struggling to understand this situation... The backend sends an API response containing a two-dimensional array: Team categories, with teams assigned to each category. The data is coming back correctly, but I can't seem to display it proper ...

VueJS not refreshing DOM after AJAX data modification

Utilizing Vue.js to make changes to my DOM, I have implemented the fetch_data() method. This method attempts to update data.messages to display 'Love the Vue.JS' once the AJAX call is successfully completed. The AJAX call executes successfully a ...

I am experiencing an issue with my service provider when it comes to displaying multiple navigator stacks

Currently, I am developing a provider to manage the user's state across different views. The primary function of this provider is to display either one stack navigator or another based on whether a certain variable is filled or empty. This setup allow ...

Issue encountered: "ERROR TypeError: Upon attempting to patchValue in ngOnInit(), the property 'form' is undefined."

Can someone help me figure out how to use the patchValue method in the ngOnInit() function? I'm trying to populate a HTML select dropdown with a value from a link, but it's not working as expected. Note: onTest() works perfectly when called sepa ...

Utilize a fluid AJAX endpoint for the Vue Select2 encapsulated component

I have customized the Wrapper Component Example based on VueJS documentation by adding the AJAX data source feature. You can view my modified code here. My goal is to dynamically set the ajax url property of my select2 component, like this: <select2 :o ...