I'm currently opening a dialog ponent using this

Parent

<v-btn color="#EF5350" dark small absolute top right fab 
 @click="showDialog">

   <v-icon>zoom_in</v-icon>  

</v-btn>

<UIDialog :dialog="dialog" @updateDialog="dialog = $event" />

<script>
  import UIDialog from '@/ponents/UI/UIDialog';
  export default {
    data() {
      return {
        dialog: false
      }
    }
    ponents: {
      UIDialog
    }, 
    methods: {
      showDialog() {
         this.dialog = true;
      }
    }
  }
</script>

This opens the dialog since I set dialog to true

Child

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   watch: {
     dialog(val) {
       if (!val) this.$emit('updateDialog', false)
     }
   }
 }
</script>

I use watch since vue dialog doesn't have event. I managed to close the dialog but I'm still getting

Avoid mutating a prop directly since the value will be overwritten whenever the parent ponent re-renders. Instead, use a data or puted property based on the prop's value

I'm currently opening a dialog ponent using this

Parent

<v-btn color="#EF5350" dark small absolute top right fab 
 @click="showDialog">

   <v-icon>zoom_in</v-icon>  

</v-btn>

<UIDialog :dialog="dialog" @updateDialog="dialog = $event" />

<script>
  import UIDialog from '@/ponents/UI/UIDialog';
  export default {
    data() {
      return {
        dialog: false
      }
    }
    ponents: {
      UIDialog
    }, 
    methods: {
      showDialog() {
         this.dialog = true;
      }
    }
  }
</script>

This opens the dialog since I set dialog to true

Child

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   watch: {
     dialog(val) {
       if (!val) this.$emit('updateDialog', false)
     }
   }
 }
</script>

I use watch since vue dialog doesn't have event. I managed to close the dialog but I'm still getting

Avoid mutating a prop directly since the value will be overwritten whenever the parent ponent re-renders. Instead, use a data or puted property based on the prop's value

• javascript
• vuejs2
• vuetify.js

Share Improve this question Follow asked Jun 17, 2019 at 6:37 AllenCAllenC 2,75411 gold badge4646 silver badges7979 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I managed to solve my problem by using puted property to get and set the dialog

Child

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   puted: {
     dialogState: {
        get() { 
          return this.dialog;
        }, 
        set(val) {
          this.$emit('updateDialog', false);
        }
     }
   }
 }
</script>

This worked for me:

Parent

<app-my-dialog :dialog="doShowDialog" @close="doShowDialog = false"></app-my-dialog>

Child ponent (app-my-dialog)

<template>
  <v-dialog :value="showDialog" @click:outside="close()">
    <v-btn @click="close()">Close</v-btn>
  </v-dialog>
</template>
<script>
  export default {
    props: {
      dialog: {
        type: Boolean,
        default: false
     }
    }, 
    puted: {
      showDialog() {
        return this.dialog;
      }
    },
    methods: {
      close() {
        this.$emit('close')
      },
    }
  }
</script>

Note that if you use <v-dialog :persistent="true" ... (that means the dialog won't close on click outside itself), you can omit the @click:outside="close()"

Depose your v-model on UIDialog, in favor of

<v-dialog v-bind:value="dialog" v-on:input="emitOutput">

where emitOutput outputs a 'value' event

emitOutput(value) { this.$emit('input', value) }

-- This should handle the message of prop mutation in the console and also provide ponent level visibility control. You won't need to do any handling for custom events on the parent when emitting an 'input' event.

Use :value and @input instead of declaring prop to v-model

Prop mutation error happens because v-model have already :value and its mutator, which is triggers this error. If you will use simple :value and declare for @input method close() it will work