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

Question

我对 vue js 有点菜鸟，但是我似乎无法理解为什么以下代码没有发出 allValid 事件:(这里是 js fiddle 中的代码片段，完整代码)

http://jsfiddle.net/sTX7y/674/

Vue.component('password-validator', {
    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>
</ul>
    `,
    props: [ 'input' ],
    data: function(){
        return {
            isLongEnough: false,
            hasUppercase: false,
        }
    },
    computed:{
        isValid: function(){
            var valid = this.isLongEnough && this.hasUppercase;
            this.$emit('allValid', valid);
            return valid;
        }
    }
});

当使用 vue chrome 扩展查看此内容时，我可以清楚地看到 isLongEnough 和 hasUppercase 都从 true 翻转为 false(并且验证反射(reflect)在输出上)。只是最后一个 isValid 计算函数似乎永远不会运行......

感谢您的帮助，如果您发现任何其他菜鸟错误，请随时指出我如何做得更好。

Answer 1

计算函数在password-validator组件中正确定义。唯一的问题是您在组件范围之外引用了它。即 {{ isValid }} 位于模板外部的 html 中。要纠正此问题，您可以更改 password-validator 模板:

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 的引用位于模板内部，它应该相应更新。

在这里更新了 fiddle :jsfiddle