I created a function called changeActive that is supposed to update the value of an active boolean. Interestingly, after checking the console log, I observed that the active value changes but for some reason, the updated value is not being passed in the v-bind:'active' to the child component.
<template>
<div style="width:300px; margin: auto;">
<RatingLabel
:rating='rating[0]'
:active='active'
style="margin: auto;"
/>
<RatingLabel
:rating='rating[1]'
style="float: right;"
/>
<RatingLabel
:rating='rating[2]'
/>
<RatingLabel
:rating='rating[3]'
style="margin: auto;"
/>
</div>
</template>
<script>
import RatingLabel from '../atomic/RatingLabel'
import { mapState } from 'vuex'
export default {
components: {
RatingLabel,
},
data() {
return {
active: false,
}
},
methods: {
changeActive() {
setTimeout(function(){
this.active = !this.active;
console.log(this.active)
}, 3000);
}
},
mounted() {
this.changeActive()
},
computed: mapState(['rating'])
}
</script>