Vue DOM not reactive to computed property

Question

I have a button that is set to be disabled if a computed property's valid property is false. If true, the button should be enabled and allow a user to move to the next step in the current flow.

My currentStep computed property is updating perfectly on changes to the current step's inputs, but the button :disabled="currentStep.valid" isn't recognizing the changes that ARE HAPPENING to currentStep.valid.

If I click on the current component (addnewprogram) in vue-devtools to see it's data, the button displays correctly!

Seen here: http://recordit.co/XH6HX7JLhV

However, without clicking on addnewprogram in the devtools, it doesn't function correctly.

Is there an obvservation caveat I'm missing?

The code for this functionality can be found here:

<template>
  <section class="newprogram">

      <div class="newprogram--content">

        <div class="newprogram--stepone" v-if="progression.current === 1">
          <div class="content--left">
            <a class="link uppercase">use existing program information<i class="fa fa-picture-o"></i></a>
            <base-input v-for="input in currentStep.inputs"
                        :key="input.id"
                        :data="input"
                        v-model="input.value"></base-input>
          </div>
          <div class="content--right">
            <!-- images -->
          </div>
        </div>

        <div class="newprogram--steptwo" v-if="progression.current === 2">
          <choice-progression :step="1"></choice-progression>
        </div>

      </div>
    </div>

    <!-- Consistent among all steps -->
    <div class="container--bottomnav">
      <div class="bottomnav--left">
        <base-btn class="button-fluid"
                  :data="currentStep.btns[0]"></base-btn>
      </div>
      <div class="bottomnav--right">
        <base-btn :data="currentStep.btns[1]"
                  :disabled="currentStepValid"></base-btn>
      </div>
    </div>
    <!-- -->

  </section>
</template>

<script>
import bottomNav from '../main/bottom-nav.vue';
import baseProgressionBarbell from '../base/base-progression-barbell.vue';
import baseInstruction from '../base/base-instruction.vue';
import baseInput from '../base/base-input.vue';
import baseBtn from '../base/base-btn.vue';
import choiceProgression from '../secondary-flows/choice-progression.vue';

export default {
  name: 'addNewProgram',
  components: {
    bottomNav,
    baseProgressionBarbell,
    baseInstruction,
    baseInput,
    baseBtn,
    choiceProgression
  },
  computed: {
    progression () {
      return this.$store.getters.getProgression('addnewprogram');
    },
    steps () {
      return this.$store.getters.getSteps('addnewprogram');
    },
    currentStep () {
      return this.steps[this.progression.current - 1];
    },
    currentStepValid () {
      return this.currentStep.valid == false ? true : false;
    },
    stepOneValidation () {
      this.steps[0].inputs.forEach(input => {
        if (!input.value) {
          return this.$set(this.steps[0], 'valid', false);
        }
        this.$set(this.steps[0], 'valid', true);
      });
    },
    stepTwoChoices() {
      return this.$store.getters.getChoices('addnewprogram', 1);
    }
  }
}
</script>

<style lang="sass" scoped>
@import '../../sass/_variables.sass'

.newprogram
  display: flex
  flex-direction: column

.container--newprogram
  display: flex
  flex-direction: column
  height: 100%
  padding: $s1

.newprogram--header
  display: flex
  justify-content: space-between
  align-items: center

  h1
    padding: 0

.newprogram--content
  display: flex
  // justify-content: center
  // align-items: center
  height: 100%
  padding-top: $s2
</style>

Please use StackOverflow's code snippets to place code directly into your question. Links can break, causing the code to be lost from the question and losing valuable context to the problem you're experiencing. — B. Fleming
Since your project has a lot of code and a number of files, however, try to isolate the problem as much as possible, only include the relevant code snippets, and perhaps consider collapsing all but the add-new-program.vue file by default. — B. Fleming
Could you create a working snippet/fiddle of the issue? I tried to, by using your code, but there is too much data to mock. — yuriy636

Roy J Roy J · Accepted Answer · 2018-01-03T19:46:24

You are updating members of a computed item. Computed items aren't editable. You need a data item, or you need to write your changes to the $store and have them refresh from there.

Vue DOM not reactive to computed property

1 Answers