I'm currently in the process of developing an app using nuxt along with vuetify 2.x, and I keep encountering a specific error message:
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: "isFormValid"
My Goal: To disable a submit button on the parent component based on the 'valid' value from a form on a child component.
Here is a snippet of my code:
parent.vue
<template>
....
<v-stepper-items>
<v-stepper-content step="1">
<ChildComponent :somedata="somedata" :valid="isFormValid" @onChange="update" />
<v-btn color="primary" @click="dosomething" :disabled="!isFormValid"> submit </v-btn>
</v-stepper-content>
</v-stepper-items>
...
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components: {
ChildComponent,
},
data() {
return {
isFormValid: false,
step: 1,
somedata: {}
};
},
methods: {
update(val: boolean) {
this.isFormValid = val;
}
},
});
</script>
childComponent.vue
<template>
<v-container>
<v-card flat>
<v-card-text>
<v-form v-model="valid" @change="onChange" class="pa-3">
<v-text-field v-model="somedata.aaa" label="a" :rules="[rules.required]" />
<v-text-field v-model="somedata.bbb" label="b" :rules="[rules.required]" />
</v-form>
</v-card-text>
</v-card>
</v-container>
</template>
<script lang="ts">
import Vue, {PropType} from 'vue';
export default Vue.extend({
props: {
somedata: {
type: Object,
default: {},
},
valid: {
type: Boolean,
default: false,
},
},
data() {
return {
rules: {
required: (value: any) => !!value || 'required',
},
};
},
methods: {
onChange() {
this.$emit("onChange", this.valid);
}
}
});
</script>
Despite my efforts to avoid directly mutating the prop value in the child component by utilizing onChange and emitting the value to the parent component, I still cannot resolve this issue. Can someone point out where I might be going wrong?