Getting the value of a parent computed function, from a child component in VueJS

Question

I'm trying to pass the value of a computed method which changes, into my child component, with little success. I'm making a button component which has several different save states - yet my button is always stuck on one and doesn't update with the parent.

My computed method works fine when I'm not trying to use this button as a component and just put it directly into the parent, so the issue is how I'm 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>

Am I doing anything which is obviously wrong here?

Answer 1

Parent

computed: {
    isSaving() {
      // add `this.`
      return (
          this.status && this.status != "done"
        )
      );
    }
}

<SaveButton v-bind:saveState="isSaving"/>

Child

<script>    
export default {
  name: "saveButton",
  props: ['saveState']
}
</script>
<template>
  <div class="settings--button-wrapper">
    <!-- use `saveState` -->
    <button>
      {{ saveState ? 'Saving..' : 'Save' }}
    </button>
  </div>
</template>

Answer 2

You should use saveState instead of isSaving.