Vue DOM 对计算属性没有反应
[英] Vue DOM not reactive to computed property
本文介绍了Vue DOM 对计算属性没有反应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果计算属性的有效属性为 false，我有一个按钮设置为禁用.如果为 true，则应启用该按钮并允许用户移动到当前流程中的下一步.
我的 currentStep 计算属性正在根据当前步骤输入的更改完美更新，但按钮 :disabled="currentStep.valid" 无法识别发生在 currentStep.valid 上的更改.
如果我在 vue-devtools 中点击当前组件(addnewprogram)来查看它的数据，按钮显示正确！
在这里看到:http://recordit.co/XH6HX7JLhV
然而，如果不点击 devtools 中的 addnewprogram，它就无法正常运行.
是否有我遗漏的观察警告?
可以在此处找到此功能的代码:
<section class="newprogram"><div class="newprogram--content"><div class="newprogram--stepone" v-if="progression.current === 1"><div class="content--left"><a class="link uppercase">使用现有的节目信息<i class="fa fa-picture-o"></i></a><base-input v-for="currentStep.inputs 中的输入":key="input.id":数据=输入"v-model="input.value"></base-input>
<div class="content--right"><!-- 图片-->
<div class="newprogram--steptwo" v-if="progression.current === 2"><choice-progression :step="1"></choice-progression>
<!-- 在所有步骤之间保持一致--><div class="container--bottomnav"><div class="bottomnav--left"><base-btn class="button-fluid":data="currentStep.btns[0]"></base-btn>
<div class="bottomnav--right"><base-btn :data="currentStep.btns[1]":disabled="currentStepValid"></base-btn>
<!-- --></节></模板><脚本>从 '../main/bottom-nav.vue' 导入底部导航；从'../base/base-progression-barbell.vue'导入baseProgressionBarbell；从'../base/base-instruction.vue'导入baseInstruction；从 '../base/base-input.vue' 导入 baseInput；从'../base/base-btn.vue'导入baseBtn；从'../secondary-flows/choice-progression.vue'导入choiceProgression；导出默认{name: '添加新程序',成分: {底部导航，baseProgressionBarbell,基础指令，基本输入，基数，选择进度},计算:{进展(){return this.$store.getters.getProgression('addnewprogram');},脚步 () {return this.$store.getters.getSteps('addnewprogram');},当前步骤(){返回 this.steps[this.progression.current - 1];},currentStepValid () {返回 this.currentStep.valid == false ?真假;},stepOneValidation(){this.steps[0].inputs.forEach(input => {如果(！输入值){返回 this.$set(this.steps[0], 'valid', false);}this.$set(this.steps[0], 'valid', true);});},stepTwoChoices() {返回 this.$store.getters.getChoices('addnewprogram', 1);}}}<style lang="sass" 作用域>@import '../../sass/_variables.sass'.新程序显示:弹性flex-direction: 列.container--新程序显示:弹性flex-direction: 列高度:100%填充:$s1.newprogram--头文件显示:弹性justify-content: 间距对齐项目:居中小时1填充:0.newprogram--内容显示:弹性//对齐内容:居中//对齐项目:居中高度:100%填充顶部:$ s2</风格>
解决方案
您正在更新计算项的成员.计算项不可编辑.您需要一个 data 项目，或者您需要将更改写入 $store 并从那里刷新.
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>
解决方案
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 对计算属性没有反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
