Error and wrong behaviour on close component from parent using Vuetify v-dialog

Question

I've a component with a simple v-dialog to show a message to user and a v-btn to close it. The scenario is:

User click on the button that show v-dialog's component.
User click on the v-btn to close the component
A error is triggered on 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"
If click again on the button to open dialog, the dialog is not re-open, because the data() show not change the value from the component's v-btn.

The dialog component 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 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>

Qonvex620 Qonvex620 · Accepted Answer · 2020-01-26T02:17:29

It's because your updating the show prop in your dialog component wherein your show data was came from your parent. That's why it is returning a warning of Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

To solve your issue, here are some ways to prevent that warning.

First when you clicked the dialog button or clicked on the outside of your dialog, you must emit an event in your dialog component. like this one.

in your V-dialog component. when user clicked on a button

<v-btn text color="primary" @click="this.$emit('hideModal')" class="body-1">Beleza!</v-btn>

Now in your parent component should received this event. Parent Component like this

<BasicMessageDialog :message="messageBasicDialog" :show="showBasicMessageDialog" @hideModal='showBasicMessageDialog = false'>
...
</BasicMessageDialog>

Now, the issue again is what if the user clicked the outside part of dialog not the button ? To solve this you must watch the value of show prop. like this one. In your v-dialog component put this.

watch: {
   show(val) {
      if(!val) {
         this.$emit('hideModal')
      }
   }
}

And everything will work fine now.

Second is to use vue .sync modifier

For convenience, Vue js offer a shorthand for this pattern with the .sync modifier. Please read the docs here sync modifier. This approach will let you avoid emitting event. Unfortunately, true two-way binding can create maintenance issues.

Last is to use state management, vuex

It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in. docs here vuex a predictable fashion.

Error and wrong behaviour on close component from parent using Vuetify v-dialog

2 Answers