放出イベントから更新されたとき計算されないvue js

Question

私はvue jsでちょっとノブですが、なぜallValidイベントが次のコードから放出されていないのか分かりません。（ここでは、 JSのフィドルのコード）IはisLongEnoughと真から偽にhasUppercase両方フリップ（およびが検証が出力に反映されていることをはっきりと見ることができるVUEクロム拡張を使用してこれを表示

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

）。それはちょうど最後の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