Prevent changing the BUG property by using Vue, Nuxt, and Property Decorators

I am facing a frustrating issue that seems to be driving me crazy. Despite my understanding of not mutating a prop and why it can lead to errors, I am certain that I am not doing so in this case. Can someone please assist me with resolving this error?

Here is the component causing trouble:

<template>
  <h2>
    {{ title }}
  </h2>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'

@Component({})
export default class Navbar extends Vue {
  @Prop() title!: string
}
</script>

I am calling it like this:

<TopHeader title="Generate Report"/>

Despite my efforts, I keep encountering the following error message:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

found in

---> <Navbar> at components/TopHeader.vue

This appears to be a bug, even though I have updated to the latest versions of nuxt, nuxt-property-decorator, and vue (prior to vue 3). Has anyone else faced this issue and can offer some guidance?

  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.21",
    "nuxt-property-decorator": "^2.9.1",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
typescriptvue.jsnuxt.js

Answer №1

The reason for this behavior is that the typescript compiler adds an assignment to the generated class constructor. To verify this, you can inspect the generated code using your browser's javascript debugger.

One possible solution is to use the following compiler option: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier

It's worth noting that when starting a new vue project (created with @vue/cli), this issue does not occur.

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

Results of Vue.JS Quiz: 2 correct answers, while 3 were incorrect

Creating an interactive Quiz or survey with scoring functionality in Vue.js. In this sample, there is only one correct answer for each question. At the end, the total score is displayed and users are redirected to another page (not shown in this demo). I ...

javascripthtmljsonvue.js

Creating a duplicate of the useFetch function within a custom hook: Here's how

I'm struggling to generate a reusable hook, but the behavior I'm getting is not what I anticipated /composables/fetch.ts export const useFetchWithErrorHandler = async (url: string, options?: FetchOptions) => { const route = useRoute(); co ...

vue.jsnuxt.jsvuejs3nuxtjs3

Customize the form using a custom component in react-hook-form: setting a default value

I have been learning ReactJS + TypeScript for 3 months now. Recently, I have a question about using react-hook-form (v7) to edit a form. I want to integrate my custom component into the form and I managed to do it on my own! Here is a snippet of my form p ...

reactjstypescriptformseditreact-hook-form

Why is the return type for the always true conditional not passing the type check in this scenario?

Upon examination, type B = { foo: string; bar: number; }; function get<F extends B, K extends keyof B>(f: F, k: K): F[K] { return f[k]; } It seems like a similar concept is expressed in a different way in the following code snippet: functi ...

typescript

Creating a bespoke numeric input component using React Native

As I work on developing a numericInput component, my goal is to streamline the code by eliminating RNTextInput. The part that confuses me is how it utilizes React.forwardRef<RNTextInput, Props>((props, ref) => { const { onChangeText, ...rest } ...

typescriptreact-native

Exploring the Power of Nested *ngFor in Angular 2

I am struggling with passing indexes to a function where the first parameter (ii) is coming back as undefined. <div *ngFor="let tab of screen.data.tabs; let indexTab = i;"> <div *ngIf="tab.active"> <div *ngIf="tab.questions"&g ...

htmlangulartypescriptngfor

The element is implicitly assigned the 'any' type due to the inability to use an expression of type to index the element

Check out my TS playground here // I have colours const colors = { Red: "Red", Blue: "Blue", Green: "Green" } type TColor = keyof typeof colors; // Some colours have moods associated with them const colorsToMood = { ...

typescript

Encountered a specific issue with Angular 8's mat-autocomplete: "matAutocomplete" is not being recognized as a valid property of the "input" element

Currently, I am attempting to implement the example here from materialUI while working with Angular 8. The mat-chip-list functions properly without the mat-autocomplete feature, but I require it for my project. Below is a snippet of my code: <mat-chip ...

htmlangulartypescriptangular-material

Is there a way to access window.location.href in Nuxtjs V3?

My goal is to enable players to join a game using a QR Code. Since the game will be hosted on multiple IP addresses, I need to dynamically generate the URL. Below is my current workaround in my NuxtJS Vue Component: <template> <input placeholde ...

javascriptvue.jsnuxt3.js

Nuxt 3 presents challenges with unpredictable CSS behavior

I've noticed a strange issue with my CSS styling. When I first load or refresh the page, no CSS is applied. However, I found that if I make a change to the style tag - such as adding or removing 'scoped' - the CSS suddenly applies correctly ...

cssvue.jssassstylingnuxt3.js

Angular Group Formation Issue

I keep encountering the following error: formGroup expects a FormGroup instance. Please pass one in. This is how it looks in HTML: <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> And in my Typ ...

javascriptangulartypescript

Is it possible to replicate Svelte's deferred transitions in Vue.js?

Is there a feature in Vue.js that is comparable to Svelte's in:receive and out:receive? I came across this functionality in the Svelte Tutorial, where it smoothly moves a todo from one list to another. You can check out how it works here: . I've ...

javascriptvue.jssveltesvelte-3

Minimizing assets in Angular 7 by running the command ng build --prod

After running ng build --prod, the JavaScript and CSS files located in /assets are not being minified. Is there a way to minify these files? I've checked the angular documentation but couldn't find any relevant information. ...

javascriptnode.jsangulartypescriptminify

Execute the CountUp function when the element becomes visible

Currently, I am implementing the following library: https://github.com/inorganik/ngx-countUp Is there a way to activate the counting animation only when the section of numbers is reached? In other words, can the count be triggered (<h1 [countUp]="345 ...

angulartypescript

Determining the type of an overloaded method within a generic function

I am currently working on developing a versatile function that can subscribe to an event emitter. The function subscribe is designed to take 3 arguments: event name, event handler, and the event emitter to connect to. I am looking for ways to ensure accur ...

typescript

What is the best way to send a string literal as a parameter to a method triggered by a click event

I'm trying to pass a string literal to a method as a click handler. <button (click)="changeLanguage('en')">EN</button> The above code is not working. Any suggestions on how to achieve this? ...

htmlangulartypescript

"Techniques for extracting both the previous and current selections from a dropdown menu in Angular 2

How can I retrieve the previous value of a dropdown before selection using the OnChange event? <select class="form-control selectpicker selector" name="selectedQuestion1" [ngModel]="selectedQuestion1" (Onchange)="filterSecurityQuestions($event.t ...

angulartypescriptdrop-down-menu

Is there a way to show a preset value when the anticipated value is null?

Can a default value be displayed if the expected value is null? Example: <v-card-subtitle class="py-0 my-0">{{ user.name??'n/a' }}</v-card-subtitle> ...

vue.jsvuejs2vue-componentvuetify.js

The error message "Unable to call mxgraph function during Jest unit testing" occurred during the execution of

My Vue JS Component is utilizing the mxgraph package, which can be found at: https://www.npmjs.com/package/mxgraph The component imports the package like so: import * as mxgraph from 'mxgraph'; const { mxClient, mxStackLayout, mxGraph, ...

javascriptvue.jswebpackjestjsmxgraph

Learn how to extract substrings from a variable within an API using Vue.js

Exploring VueJs for the first time and looking to split a string by comma (,) retrieved from an API into separate variables. The data is coming from a JSON server. "featured-property": [ { "id": "1", " ...

javascriptvue.jssplit