반응형
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
반응형
'programing' 카테고리의 다른 글
VueJ: @click.disclick.stop = " " 가능합니까? (0) | 2022.07.04 |
---|---|
JavaScript는 왜 JavaScript라고 불리는가? 자바와는 아무런 관련이 없는데? (0) | 2022.07.04 |
vuejs 구성 요소에서 작업을 디스패치할 때 vuex 알 수 없는 작업 유형 (0) | 2022.07.04 |
페이지를 새로 고치지 않으면 소켓 IO가 작동하지 않음 - Vue js (0) | 2022.07.04 |
BLAS dgemm의 LDA 인수 목적 (0) | 2022.07.04 |