孩子不更新基於道具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的插件鉻）的 錯誤對象，該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>