ребенок не обновление на основе реквизита в 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 событие, где я убирая ошибки, с помощью вызова метода на классе , С :errors="errors" я передаю экземпляр ниже Errors класса, в <form-error> детского компонента:

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> ребенка компонента у меня есть это:

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

Теперь, в то время как v-text="errors.get('post')" работает отлично, и Я получаю сообщение об ошибке , часть v-if="errors.has('post')" не работает вообще.

Я принимаю, что errors передается вправо, как реквизит, в противном случае errors.get('post') не работает.

Вопрос в том, почему, когда родитель запускает что @keydown события, и я вижу ошибки объект является опорожнением правильно (Вя аддона для хрома), то 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> 

ошибки [ 'Post']

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