Vue生命周期：绑定属性时对象未定义

Question

我似乎在vue生命周期上遇到问题-定义了我正在使用{{ family.plusOne }}之类的东西在DOM中检索数据的全局对象。

[当我将其用作:checked="family.plusOne"等属性时，//期望将true作为值，则未定义。

我尝试运行:check="callFunction()"并将其记录到控制台。

我打了两个电话，一个说

family.plusOne未定义

和另一条记录到控制台的日志中说

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 }}显示为true，但:checked="(family.plusOne ==1)"为false

Answer 1

首先，如果您仅传递family.plusOne，那么孩子的结果是什么？未定义？

第二，也许您可​​以使用类似的计算属性

：checked =“ computedFamilyPlusOne”

computed: {
    computedFamilyPlusOne: {
        if(this.family.plusOne == 1){
          return true
        }else {
          return false
        }
    }
}

Answer 2

我的猜测是，您的family对象不存在于通常在Vue.js组件上的data() {}方法中作为默认数据绑定的一部分。这意味着在安装组件之前，Vue在编译模板时不知道该值，因此好像值未定义。然后，在某个时候，您可能只更新了family对象的该属性。这意味着该对象的反应状态从未改变，因此Vue.js不知道它需要重新计算模板（reactive "gotcha"）。

为了验证我是正确的，请确保您使用Vue.set()方法，或将新对象与family对象的更新属性值重新绑定。

Answer 3

我参与了生命周期阶段

created() {
    this.populatePeople();
},
updated() {
    componentHandler.upgradeDom();
},

这使我可以在加载DOM之前更新数据，并遵循一些解决方案，我调用componentHandler.upgradeDom（）以正确显示开关和单选按钮。