Prop being mutated: "isOpen" - node.js

Question

I got this error:
vue.runtime.esm.js?2b0e:619 [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: "isOpen"
Here is my code
My child component:
<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>
Parent Component:
<template>
<div class="container">
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="contracts"
sort-by="createdAt"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>CONTRACTS</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
>New Contract</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field
label="Start Contract"
name="name"
prepend-icon="person"
placeholder="YYYY-MM-DD"
type="text"
required
v-model="selectedItem.startDate"
:rules="nameErrors"
#input="$v.selectedItem.startDate.$touch()"
#blur="$v.selectedItem.startDate.$touch()"
#keyup="clearServerErrors('name')"
/>
</v-col>
<v-col cols="12" sm="6">
<v-select
v-model="selectedItem.duration"
:items="[1, 2, 3, 6, 12]"
label="Duration Contract."
required
/>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-select
v-model="selectedItem.leave"
:items="[20, 26]"
label="Days off"
/>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="close">Cancel</v-btn>
<v-btn
color="blue darken-1"
text
#click="onSave"
:disabled="!isValid"
>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">mdi-pencil</v-icon>
<v-icon small #click="showDeleteDialog(item)">mdi-delete</v-icon>
<v-icon middle #click="goToRouteLeaves(item)">play_arrow</v-icon>
</template>
</v-data-table>
<CreateOrEditContract :is-open="isDialogDeleteVisible" #closedialog="close()" />
<!-- <v-dialog v-model="isDialogDeleteVisible" 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="isDialogDeleteVisible = false">Close</v-btn>
<v-btn color="primary" text #click="deleteItem">Delete</v-btn>
</v-card-actions>
</v-card>
</v-dialog>-->
</v-app>
</div>
</div>
</template>
<script>
import ContractService from '../services/ContractService';
import UserContractsService from '../services/UserContractsService';
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
import CreateOrEditContract from './CreateOrEditContract';
var moment = require('moment');
export default {
name: 'Admin',
components: {
CreateOrEditContract
},
mixins: [validationMixin],
validations: {
selectedItem: {
startDate: {
required,
isStartDate(value) {
return this.isStartDate(value);
}
}
}
},
data() {
return {
selectedItem: {
startDate: ''
},
serverErrors: {
startDate: ''
},
errorMessage: '',
error: null,
validationError: false,
contracts: [],
dialog: false,
isDialogDeleteVisible: false,
headers: [
{ text: 'Start', value: 'startDate' },
{ text: 'Duration', value: 'duration' },
{ text: 'Leave', value: 'leave' },
{ text: 'Actions', value: 'actions', sortable: false }
],
defaultItem: {
startDate: '',
duration: '',
leave: ''
}
};
},
created() {
this.selectedItem = { ...this.defaultItem };
},
async mounted() {
try {
const { userId } = this.$route.params;
const { data } = await UserContractsService.index(userId);
this.contracts = data;
} catch (error) {
this.errorMessage =
(error.response && error.response.data ? error.response.data : null) ||
error.message ||
error.toString();
}
},
computed: {
formTitle() {
return this.selectedItem.id ? 'Edit Contract' : 'New Contract';
},
nameErrors() {
const errors = [];
if (!this.$v.selectedItem.startDate.$dirty) return errors;
!this.$v.selectedItem.startDate.required && errors.push('Date is required');
!this.$v.selectedItem.startDate.isStartDate && errors.push('Enter valid date');
return errors;
},
isValid() {
return !this.$v.$invalid;
}
},
watch: {
dialog(val) {
val || this.close();
}
},
methods: {
editItem(item) {
this.selectedItem = { ...item };
this.dialog = true;
},
async deleteItem() {
const index = this.contracts.findIndex((contract) => contract.id === this.selectedItemlete.id);
this.contracts.splice(index, 1);
this.isDialogDeleteVisible = false;
await ContractService.delete(this.selectedItemlete.id);
this.selectedItemlete = { ...this.defaultItem };
},
showDeleteDialog(item) {
this.selectedItemlete = item;
this.isDialogDeleteVisible = true; //!this.isDialogDeleteVisible;
// this.$emit("clicked", !this.isDialogDeleteVisible)
},
close() {
this.isDialogDeleteVisible = false;
this.dialog = false;
this.selectedItem = { ...this.defaultItem };
},
async onSave() {
if (this.selectedItem.id) {
const index = this.contracts.findIndex((contract) => contract.id === this.selectedItem.id);
await ContractService.save(this.selectedItem);
this.$set(this.contracts, index, this.selectedItem);
} else {
this.selectedItem.userId = this.$route.params.userId;
const { data } = await ContractService.save(this.selectedItem);
this.contracts.push(data);
}
this.close();
},
goToRouteLeaves(item) {
this.$router.push(`/leaves/${item.id}`);
},
clearServerErrors(type) {
this.serverErrors[type] = [];
},
isStartDate(value) {
return moment(value, 'YYYY-MM-DD', true).isValid();
}
}
};
</script>
<style scoped>
v-btn {
position: absolute;
}
</style>

Answer 1

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">

Answer 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