CODEWITHSUNDEEP
typescriptvue.js
user1037355
user1037355

Reputation:

vuejs typescript and child components "Avoid mutating a prop directly"

I'm going round in circles here.

I have a vuejs2 app up and running with typescript but hitting an error when i try to pass data to a child component that originates from the store.

<template>
    <div>
       <form-error :error422.sync="errors"></form-error>
    </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import FormError from '@/components/FormError422.vue';
  import cloneObj from '@/utils/cloneObj';

  @Component({
    components: {
      FormError,
    },
  })
  export default class RegisterForm extends Vue {
    get errors() {
      return cloneObj(AuthenticationModule.errorRegister);
    }
</script>

The child

<template>
  <div>
    {{error422.errors}}
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Generic422 } from '@/ms-authentication'

@Component
export default class FormError422 extends Vue {
  @Prop() private error422: Generic422 = {
    errors: [],
  };
}
</script>

But whatever i do it throws a warning:

[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: "error422"

Upvotes: 5

Views: 2375

Answers (1)

Sergeon
Sergeon

Reputation: 6788

I think you're trying to set error422 default value as:

errors: [],

And you're setting it up directly in the FormError422 class, via the = assignment.

This is not the way you should be using the @Prop() decorator to set up a default value. Instead, you are directly mutating the prop instead of setting up the default value.

therefore, Vue warns you because you should not do that.

To set up a prop default value with the @Prop decorator, do this:

@Prop({default: {errors: []}}) private error422!: Generic422;

Upvotes: 3

Related Questions