I’m trying to update a Boolean variable setup in the parent, from a child component.
I’ve passed the variable as a prop in the parent to the child component:
<script>
let isFinished = false;
</script>
<template>
<Child
v-if="isFinished === false"
:isFinished = isFinished
/>
<Child2
v-if="isFinished === true"
:isFinished = isFinished
/>
</template>
and I can see it being received with a console.log
in the child component, but I get an error when I try to change the value saying it’s read only:
export default {
props: {
isFinished: Boolean
},
methods: {
submit: function(e) {
console.log('prop recieved:', this.isFinished);
this.isFinished = true;
}
}
}
What else do I need to do to be able to change the Boolean in the child so it’s passed back up to the parent to switch the components to render?
Any help would be appreciated thank you.