Javascript 从发出的事件vue js更新时计算未运行

我对vue js有些茫然，但是我似乎不明白为什么allValid事件不是从以下代码中发出的：（这里是代码片段，js FIDLE中的完整代码）

Vue.component（'password-validator'{
模板：`

时间够长了吗
上

`,
道具：[‘输入’]，
数据：函数（）{
返回{
够长了：错，
大写：false，
}
},
计算：{
isValid:function（）{
var valid=this.islongtough&&this.hassuppercase；
此.$emit（'allValid'，valid）；
返回有效；
}
}
});

当使用vue chrome扩展查看这一点时，我可以清楚地看到isLongEnough和hasUppercase都从true转换为false（验证反映在输出上）。只是最后一个isValid计算函数似乎永远不会运行

---

感谢您的帮助，如果您发现任何其他noob错误，请随时插话说明我如何能做得更好。

计算函数在

密码验证器组件中定义正确。唯一的问题是您在组件范围之外引用了它。i、 e.
{{isValid}
位于模板之外的html中。要更正此问题，您可以更改密码验证程序模板，如下所示：

template: `
<ul>
    <regex-validation regex='.{6,}' v-on:valid='v => { isLongEnough = v }' :input='input'> 
    Is Long Enough
    </regex-validation>
    <regex-validation regex='[A-Z]' v-on:valid='v => { hasUppercase = v }' :input='input'>
    Has Upper
    </regex-validation>
    Is Valid: {{ isValid }}
</ul>

模板：`

时间够长了吗
上
是有效的：{{isValid}


现在，对计算属性
的引用在模板中是有效的
，它应该相应地更新

在这里更新了小提琴：

template: `
<ul>
    <regex-validation regex='.{6,}' v-on:valid='v => { isLongEnough = v }' :input='input'> 
    Is Long Enough
    </regex-validation>
    <regex-validation regex='[A-Z]' v-on:valid='v => { hasUppercase = v }' :input='input'>
    Has Upper
    </regex-validation>
    Is Valid: {{ isValid }}
</ul>