방출 된 이벤트 vue js에서 업데이트 할 때 계산되지 않음

Question

vue 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; 
     } 
    } 
}); 

http://jsfiddle.net/sTX7y/674/ 내가 isLongEnough과 거짓 (및 검증에 충실에서 hasUppercase 모두 ​​플립가 출력에 반영되는 것을 분명히 알 수 VUE 크롬 확장 기능을 사용하여이보기). 마지막 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에 대한 참조가 템플릿 안에 있음, 그에 따라 업데이트해야합니다.

여기에 피들을 업데이트했습니다. jsfiddle