親コンポーネントからVeeValidateエラーバッグにエラーを追加し、子コンポーネントから聴く

Question

これを実装するためのガイドラインが見つかりませんでした。親コンポーネントからエラーバッグにデータを追加し、子コンポーネントの特定のエラーを条件付きで表示するにはどうしますか？

私は次のようなparentコンポーネントからエラーのバッグにエラーを追加しました：childコンポーネントから、私は条件付きでエラー袋かどうかに応じて何かを表示したいのですが、今

export default { 
    mounted() { 
    this.$validator.errors.add('critical', 'Unable to connect', 'network') 
    } 
} 

エラーがあるかどうか。

<a class="navbar-item" v-if="!errors.has('critical')">Hello World</a> 

VeeValidateとしてerrors.has('critical')リターンfalseは、各コンポーネントの新しいインスタンスを返します。私は次の私の子コンポーネントを追加しました。ですから、同じエラーバッグを親コンポーネントから子コンポーネントに転送するにはどうしたらいいですか？

Answer 1

私はVeeValidateの経験はありませんが、Vueの方法はあなたが何を使用しているかに関係なくうまく動作するはずです。

あなたのライブラリではおそらく別の方法もあります。

let payload = { 
    message: 'Unable to connect', 
    type: 'network' 
}; 
this.$emit('error', payload); 

あなたの子コンポーネントステップ2

、または任意のコンポーネント：1

があなたの親コンポーネントのメソッドから、あなたのイベントを放ち

ステップ：とにかく、私はそれをそのようにしてください：

let self = this; 
$on('error', (payload) => { 
    self.error = payload; 
}); 

ステップ3

今、あなたの他のコンポーネントにテンプレート側からアクセスすることができます

<div class="alert alert-danger" v-if="error.type == 'critical'" v-text="error.message"></div> 

これはあくまでも一例です。それはES6で、他のバージョンでも自由に翻訳できます。

あなたが探しているドキュメントはここにある：https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events