Here is the source code snippet:
This is the Child Component:
<template>
<v-snackbar
v-model="showSnackbar"
:bottom="y === 'bottom'"
:left="x === 'left'"
:multi-line="mode === 'multi-line'"
:right="x === 'right'"
:timeout="timeout"
:top="y === 'top'"
:vertical="mode === 'vertical'"
>
{{ text }}
<v-btn
color="pink"
flat
@click="showSnackbar = false"
>
Close
</v-btn>
</v-snackbar>
</template>
export default class AliUMSSnackbar extends Vue {
@Prop() private showSnackbar!: Boolean;
}
This is the Parent component:
<ali-snackbar v-bind:showSnackbar="showSnackbar"></ali-snackbar>
However, when the Close button is clicked, an error occurs: '[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: "showSnackbar"'