programing

Vue DOM이 계산된 속성에 반응하지 않음

copyandpastes 2022. 7. 4. 23:32
반응형

Vue DOM이 계산된 속성에 반응하지 않음

계산된 속성의 유효한 속성이 false일 경우 비활성화하도록 설정된 버튼이 있습니다.true일 경우 버튼을 활성화하고 사용자가 현재 흐름의 다음 단계로 이동할 수 있도록 해야 합니다.

currentStep 계산 속성이 현재 스텝의 입력 변경에 대해 완벽하게 업데이트되고 있지만:disabled="currentStep.valid" 단추가 currentStep.valid에 대한 변경 사항을 인식하지 못합니다.

vue-devtools에서 현재 구성 요소(addnew program)를 클릭하여 해당 데이터를 확인하면 버튼이 올바르게 표시됩니다.

이쪽 : http://recordit.co/XH6HX7JLhV

그러나 devtools에서 addnew 프로그램을 클릭하지 않으면 제대로 작동하지 않습니다.

제가 놓친 관찰 경고라도 있나요?

이 기능의 코드는, 다음의 URL 에 있습니다.

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

계산된 항목의 구성원을 업데이트하고 있습니다.계산된 항목은 편집할 수 없습니다.필요한 것은data아이템 또는 변경 내용을 기입할 필요가 있습니다.$store거기서부터 새로워지게 해 주세요.

언급URL : https://stackoverflow.com/questions/48083211/vue-dom-not-reactive-to-computed-property

반응형