I'm facing an issue with a Vue (2.6.11 via Nuxt) component that receives a Boolean property from its parent and uses it to calculate additional computed properties. Everything displays correctly after the initial rendering. However, when the parent toggles the value of the passed-down property, only some values in this component actually change. The DIVs directly linked to the property and 'original' are updating fine, but 'flipped' and 'stringed' remain static.
Even assigning the original property to a local variable before any computations within the computed property function doesn't affect the outcome at all.
Converting the computed properties into methods doesn't resolve the issue either. Only the first two values seem to update as expected.
Please note that the code snippet below has been simplified to highlight the problem.
<template>
<div class="x">
<div class="y">
<div class="x">
<div>{{ flag }}</div>
</div>
<div class="x">
<div>{{ original }}</div>
</div>
<div class="x">
<div>{{ flipped }}</div>
</div>
<div class="x">
<div>{{ stringed }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "FlagBox",
props: {
"flag": {
type: Boolean
}
},
computed: {
original: function() {
return this.flag;
},
flipped: function() {
return !this.flag;
},
stringed: function() {
return this.flag ? "yes" : "no";
}
}
}
</script>
Any insights on what I might be overlooking here would be greatly appreciated. Thank you.