Question

如果计算属性的有效属性为false，我有一个设置为禁用的按钮。如果为true，则应启用该按钮并允许用户移动到当前流程中的下一步。

我的currentStep计算属性正在更新当前步骤的输入，但按钮：disabled =＆＃34; currentStep.valid＆＃34;没有认识到发生在currentStep.valid上的变化。

如果我点击vue-devtools中的当前组件（addnewprogram）查看它的数据，该按钮会正确显示！

但是，如果没有点击devtools中的addnewprogram，它就无法正常运行。

是否有遗漏的警告？

此功能的代码可在此处找到：

<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>

Answer 1

您正在更新计算项目的成员。计算项目不可编辑。您需要data项，或者需要将更改写入$store并从那里刷新。

Vue DOM不响应计算属性

1 个答案: