Recently, I encountered a situation where a component contained a straightforward v-dialog to display a message to the user and a v-btn to close it. The sequence of events went as follows:
- The user clicked on the button that triggered the
v-dialog's component. - Subsequently, the user clicked on the
v-btnto close the component. - Unexpectedly, an error was logged in the console:
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: "show" - Upon attempting to reopen the dialog by clicking the button again, the dialog failed to appear because the value of the component's
data() showremained unchanged from the previous state.
The dialog component is named BasicMessageDialog.vue
<template>
<div class="text-center">
<v-dialog v-if="showDialog" width="500">
<v-card>
<v-card-title primary-title class="title">Ops...</v-card-title>
<v-card-text class="body-1">{{message}}</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="show = false" class="body-1">Beleza!</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: "BasicMessageDialog",
computed: {
showDialog() {
return this.show;
}
},
props: {
show: Boolean,
message: String
}
};
</script>
<style>
</style>
The main component identified as Login.vue
<template>
...
<BasicMessageDialog :message="messageBasicDialog" :show="showBasicMessageDialog">
...
</BasicMessageDialog>
</template>
<script>
import BasicMessageDialog from "@/components/BasicMessageDialog";
export default {
name: "Login",
components: {
BasicMessageDialog
},
data: () => ({
showBasicMessageDialog: false,
messageBasicDialog: "",
)},
methods: {
forgetPassword() {
console.log("forgetPassword");
if (this.email == "") {
this.messageBasicDialog = "Digite o e-mail no campo!";
this.showBasicMessageDialog = true;
}
}
}
</script>