[Vuejs]-Prop being mutated: "isOpen"

by

2👍

✅

v-model="isOpen" your child component is trying to change the props isOpen.
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

make change like below:
Parent:

<CreateOrEditContract :is-open.sync="isDialogDeleteVisible" @closedialog="close()" />

Child:

computed: {
  open: {
    // getter
    get: function () {
      return this.isOpen
    },
    // setter
    set: function (newValue) {
      this.$emit('update:isOpen', newValue)
    }
  }
}

<v-dialog v-model="open" max-width="500px">
👤Phymo

2👍

It’s because props work from top to bottom pattern. isOpen passed by parent to child, now it’s like data flowing from top to bottom. If your child tries to mutate that data, how will parents get informed about that change? The parent will never get informed this way that’s why it’s a warning to not change the value of prop passed in child. You need to find a way to communicate to parents and parents will update that prop, this way data flow will not break.

Here v-model is two-way binding which means it will set the value of the property which is isOpen prop.

<template>
    <v-dialog v-model="isOpen" max-width="500px">
        <v-card>
            <v-card-title>Remove</v-card-title>
            <v-card-text>Are you sure to delete?</v-card-text>
            <v-card-actions>
                <v-btn color="primary" text @click="$emit('closedialog')">Close</v-btn>
                <!-- <v-btn color="primary" text @click="deleteItem">Delete</v-btn>  -->
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
export default {
    // name: 'confirmDelete',
    props: {
        isOpen: Boolean
        // selected: Object
    }
};
</script>

Hint: You can emit event to inform parent about the change and make parent change the value of isOpen. Try computed getter/setter to achieve this

👤Satyam Pathak

Leave a comment