vue-property-decorator: Prop being mutated?

Question

I use vue-property-decorator, it's a simple component and I got 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: "message"

What this message means? and how can I solve this?

here is my code for example:

<template>
    <v-layout row justify-center>
        <v-dialog v-model="dialog">........</v-dialog>
    </v-layout>
</template>

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

@Component({})
export default class SomeModal extends ... {

  @Prop() public dialog?: boolean;
  @Prop() public message?: string;

  constructor() {
    super();
  }

  public showError(er) {
    this.message = er.message;
    this.dialog = true;
  }
}
</script>

<style scoped lang="scss">
</style>

Bernard Pagoaga Bernard Pagoaga · Accepted Answer · 2018-09-23T09:34:11

I am not used with this syntax for vue, but the message is pretty clear : you need to define a data property, or a computed variable. That means either :

data: {
    dialogData: ''
}

constructor() {
    super();
    this.dialogData = this.dialog;
}

or :

computed: {
    dialogData() {
        return this.dialog;
    }
}

See the vuejs doc on computed properties.

Edit : with vue-property-decorator, it could be :

@Component
export default class YourComponent extends Vue {
  // your code here...
  private _dialogData: string = '';

  constructor() {
      super();
      this._dialogData = this.dialog;
  }
}

vue-property-decorator: Prop being mutated?

1 Answers