I am working with a component that has props, and I need to change the value from false to true. However, I encountered a message in the Chrome console advising against mutating a prop directly because it will be overwritten whenever the parent component re-renders.
Within the parent component, there is a function called myFunction that takes one argument (value).
I want to maintain my argument as is, while also being able to retrieve the emitted value from the child component in order to update myData without directly mutating the props in the child component.
<template>
<div>
<p>The number is {{number}}</p>
<Child :MyProp="myData" @on-click-btn="myfonction(5)"/>
</div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
data() {
return {
myData: 'button',
number: 1
};
},
components: {
Child
},
methods: {
myfonction(value) {
this.number = value;
}
}
};
</script>
Thank you!