孩子没有根据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事件时，我看到了 错误对象正在被清空（Vue addon for chrome），v-if 部分不更新，从而隐藏div？

正如您所看到的，<FormError>子组件正在更新，以反映我开始输入时errors的变化，但仍然不会触发v-if。

修改

更令人困惑的是，文档说：

  

请注意，JavaScript中的对象和数组是通过引用传递的，所以如果是   prop是一个数组或对象（在我的例子中），改变了对象或数组本身   孩子会影响父母的状态。

虽然我当然没有在我的孩子身上改变对象，但是 重要的是父母的对象变化应该反映在孩子身上。

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>