VueJS沒有收集傳遞的數據

我對VueJS很新，所以期待這是我的問題，但希望得到一些指導。VueJS沒有收集傳遞的數據

我有一個Vue實例，數據中的person對象包含一些預定義的數據，但是我在添加到對象時它已被掛載。無論出於何種原因，我無法理解它在安裝時未插入數據來更新DOM。我已經檢查過vue應用程序，並且可以確認正在添加的已安裝方法的人正在正確添加。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     people: { 
 
     Dave: {'Age': 30, 'Plays': 5} 
 
     } 
 
    }, 
 

 
    mounted: function() { 
 
     this.people['Rob'] = {'Age': 22, 'Plays': 24}; 
 
    } 
 
    });

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <ul> 
 
    <li v-for="(person, key) in people"> 
 
     {{ key }}: {{ person.Age }} 
 
    </li> 
 
    </ul> 
 
</div>

我有一種感覺，這可以是一個疑難雜症Vue公司或我在做一些非常愚蠢的。

來源

2017-07-26 Paradigm

這是由於change detection caveat

相反，你應該做的是這樣的：

new Vue({ 
el: '#app', 
data: { 
    people: { 
    Dave: {'Age': 30, 'Plays': 5} 
    } 
}, 

mounted: function() { 
    this.$set(this.people, 'Rob', Object.assign({}, { 'Age': 22, 'Plays': 24})); 
} 
});

這裏是fiddle

我也推薦你去通過array change caveats所以你不面對未來的任何問題

來源

2017-07-26 10:41:23

謝謝，我認爲我做錯了什麼。我現在就來看看這些。 – Paradigm

@Paradigm高興地幫助:) –

或者使用安裝元件前觸發的鉤子。

new Vue({ 
    el: '#app', 
    data: { 
    people: { 
     Dave: {'Age': 30, 'Plays': 5} 
    } 
    }, 

    created: function() { 
    this.people['Rob'] = {'Age': 22, 'Plays': 24}; 
    } 
});

來源

2017-07-26 10:49:14 NICO

但是，應該v-不被反應？如果有其他項目添加到數據，它應該自動更新列表，據我所知。 – Paradigm

當元素被安裝時，您需要使用Vue的$ set或$ delete方法來添加或刪除人物模型中的對象。或者使用安裝元件之前觸發的任何鉤子。 – NICO

VueJS沒有收集傳遞的數據

回答

相關問題