I feel like I'm stuck in a loop here.
Currently, I have a Vue.js 2 app set up and running with TypeScript. However, I'm encountering an issue when trying 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 component snippet:
<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>
No matter what approach I take, I keep receiving a warning 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: "error422"