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

by

1👍

✅

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.

-1👍

  <v-btn text color="primary" @click="show = false" class="body-1">Beleza!</v-btn>

You can’t change prop as said in error instead of you have to add function, send it as prop, and call when you need change your prop value , parent have to handle the function and change data.

<template>
    ...
 <BasicMessageDialog :message="messageBasicDialog" :show="showBasicMessageDialog" :hide="showBasicMessageDialog=!showBasicMessageDialog">
...
</BasicMessageDialog>
</template>

and

<v-btn text color="primary" @click="hide" class="body-1">Beleza!</v-btn>

https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Leave a comment