子私は私の親スコープにこのようなものを持っているVue.js

Question

に小道具に基づいて更新されない：

<form-error :errors="errors"></form-error> 
<textarea class="form-control" name="post" cols="30" rows="8" @keydown="errors.clear('post')" v-model="post"></textarea> 

注私はクラスに メソッドを呼び出すことによって、エラーをクリアしています@keydownイベント、 。

class Errors { 
    constructor() { 
     this.errors = {}; 
    } 

    get(field) { 
     if (this.errors[field]) { 
      return this.errors[field][0]; 
     } 
    } 

    clear(field) { 
     delete this.errors[field]; 
    } 
    has(field) { 
     return this.errors.hasOwnProperty(field); 
    } 
} 

そして、私はこの持ち<form-error>子コンポーネントで：v-text="errors.get('post')"が正常に動作している間、今

<template> 
    <div v-if="errors.has('post')" class="alert alert-danger" v-text="errors.get('post')"></div> 
</template> 
<script> 
    export default { 
     props: ['errors'] 
    }; 
</script> 

を、と私は<form-error>子コンポーネントにErrors以下のクラス、 のインスタンスを渡しています:errors="errors"で エラー が表示され、v-if="errors.has('post')"の部分がまったく動作しません。

私はerrorsが小道具として正しい方法で渡されたと仮定しています。そうでなければ、 errors.get('post')は動作しません。親がその@keydownイベントをトリガし、私は エラーオブジェクトを参照して適切に（クローム用Vueのアドオン）を空にされている理由とき

質問は、v-if 一部は、このようにdiv要素を隠して、更新しませんか？

あなたが見ることができるように、<FormError>子コンポーネントは、私が入力を開始するときerrorsの変化を反映するために更新されているが、それでもv-ifトリガされません。

編集

さらに混乱何、ドキュメントは言う： 小道具が配列またはオブジェクトであるかのように、JavaScriptでのオブジェクトと配列は、参照によって渡されることを

ノート（のように私の場合）、子オブジェクト 内のオブジェクトまたは配列自体を変更すると、親状態に影響します。

私の子供の中から対象を突然変異させているわけではありませんが、 重要な部分は、親の中の対象の変更が子供に反映されるべきです。

Answer 1

エラーが発生しましたか？私が見る通り、Map.hasはブラウザでのサポートが貧弱です。それだけでカスタムクラスだ、

<template> 
    <div v-if="'post' in errors" class="alert alert-danger" v-text="errors.get('post')"></div> 
</template> 

エラーエラーで

が

ポスト[ 'ポスト']

<template> 
    <div v-if="errors['post'] !== undefined" class="alert alert-danger" v-text="errors.get('post')"></div> 
</template>