I am facing difficulties in passing the dynamically changing value of a computed method to my child component. I am creating a button component with different save states, but the button always remains stuck on one state and does not update according to the parent.
The computed method works perfectly fine when I directly use it in the parent without turning it into a button component. Therefore, the problem lies in how I am passing the data.
Parent
computed: {
isSaving() {
return (
this.$_.values(this.$store.getters["CommonSettings/saving"]).filter(
status => status && status != "done"
).length > 0
);
}
}
<SaveButton v-bind:saveState="isSaving"/>
Child
<script>
export default {
name: "saveButton",
props: ['saveState']
}
</script>
<template>
<div class="settings--button-wrapper">
<button v-if="!saveState">
Save
</button>
<button v-if="saveState">
Saving..
</button>
</div>
</template>
Could you please point out if I am making any obvious mistakes here?