孩子不更新基於道具Vue.js

我有這樣的事情在我父範圍：孩子不更新基於道具Vue.js

<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中數組是通過引用傳遞，所以如果道具是一個數組或對象（如在我的情況），在孩子中突變對象或數組本身會影響父狀態。

儘管當然我並沒有在我的孩子中使用變異對象，但的重要部分是父對象變化應該體現在孩子身上。

來源

2017-01-08 branquito

您是否收到任何錯誤。正如我所見，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>

來源

2017-01-08 03:09:16 Saurabh

但這不是地圖，它只是一個自定義類'hasOwnProperty'方法封裝器 – branquito

@branquito你也可以使用'hasOwnProperty'。 – Saurabh

對不起，但我不認爲我們在這裏是在同一頁。我使用hasOwnProperty，它不起作用（提示：看看那個錯誤類）。除此之外，當移入「'。 – branquito

孩子不更新基於道具Vue.js

回答

相關問題