VueJS error Avoid mutating a prop directly

Question

I'm trying to create a modal but I'm getting this error only when I close it:

[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: "value"

found in

---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

PanelDesconectarModal.vue

<template>
    <v-dialog v-model="value" max-width="350">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline">Desconectar</v-card-title>
            <v-divider></v-divider>
            <v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat @click.native="closeDialog">Cancelar</v-btn>
                <v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'panel-desconectar-modal',
        props: ['value'],
        methods: {
            closeDialog() {
                this.value = false;
            },
            desconectar() {
                this.closeDialog();

                window.location = this.$route + '/panel/desconectar';
            }
        }
    }
</script>

Using ProgressDesconectarModal.vue, showDesconectar is a data variable

<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>

Answer 1

This happens because you have props value in your v-model.

Do not do that, as that will mutate the prop(value) when v-model changes (you should only change data values with v-model afaik, but in this case, you don't even need additional data variable).

Since vuejs v2.3.0, it is suggested to emit value to the parent, so that parent changes it, and it is then passed to child component.

---

So all you have to do is:

in v-dialog component

remove v-model and replace it with :value="value" @input="$emit('input')"

And your function:

closeDialog() {
    this.$emit('input');
}

In panel-desconectar-modal component use v-model="showDesconectar".

---

This will work because:

<input v-model="something"> is syntactic sugar for:

<input   
    v-bind:value="something"
    v-on:input="something = $event.target.value">

Here is working example pen which I provided in an answer to similar question.