Question

我有点像vu js的菜鸟，但我似乎无法理解为什么allValid事件不会从以下代码中发出:(这里的片段，js中的完整代码）小提琴）

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（并且验证会反映在输出中）。它只是最后一个isValid计算函数似乎永远不会运行...

感谢您的帮助，如果您发现任何其他noob错误，请随时了解我如何做得更好。

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

在此处更新了小提琴：jsfiddle

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

1 个答案: