我似乎在 vue 生命周期中遇到了问题 - 我使用{{ family.plusOne }}之类的东西在 DOM 中检索数据的全局对象是定义的。
当我将其用作属性(例如:checked="family.plusOne"//期望 true 作为值(时，它是未定义的。
我尝试运行:check="callFunction()"并将其记录到控制台。
我接到两个电话，一个说
family.plusOne 是未定义的
和另一个日志到控制台说
家庭加一个是真的
这是我期望的值。
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch">
<input type="checkbox" id="switch" @change="setPlusOne($event.target.checked)" class="mdl-switch__input" :checked="(family.plusOne == 1)"/>
<span class="mdl-switch__label" >{{family.plusOne == 1}}</span>
</label>
范围内的{{family.plus ==1 }}显示为真，但:checked="(family.plusOne ==1)"为假
首先，如果你只是通过family.plusOne，孩子的结果是什么？，未定义？
其次，您可以使用计算属性，例如
：checked="computedFamilyPlusOne">
computed: {
computedFamilyPlusOne: {
if(this.family.plusOne == 1){
return true
}else {
return false
}
}
}
我的猜测是，你的family对象不作为通常位于 Vue.js 组件上的data() {}方法中的默认数据绑定的一部分存在。这意味着在挂载组件之前，Vue 在编译模板时不知道值，因此看起来值好像是未定义的。然后，在某些时候，您可能只更新family对象的该属性。这意味着对象的反应状态从未改变，所以 Vue.js 不知道它需要重新计算模板(反应式"陷阱"(。
若要验证我是否正确，请确保使用Vue.set()方法，或使用family对象的更新属性值重新绑定新对象。
我玩了一下生命周期阶段
created() {
this.populatePeople();
},
updated() {
componentHandler.upgradeDom();
},
这允许我在加载 DOM 之前更新数据，按照一些解决方案，我调用 componentHandler.upgradeDom(( 来正确显示开关和单选按钮。