vue jsが子コンポーネントにデータを渡す

Question

コンポーネントcontacts-listの子コンポーネントcontactViewがあります。それ自体は子です。問題は、私は動的にボタンをクリックした後、このコンポーネントの内容

HTML

<div id="wrapper"> 
    <component :is="currentView" keep-alive></component> 
</div> 

JS

var IndexPage = Vue.component('index-page', { 
    template: '<div>Welcome to index page</div>' 
}) 

var Contact = Vue.component('contactView', { 
    template: ` 
    <div class="person-info"> 
    <ul v-for="contact in contacts"> 
     <span>here</span> 
     <li v-if="contact.email"> 
     <div class="icon icon-mail"></div> 
     {{contact.email}} 
     </li> 
    </ul> 
    </div> 
    `, 
    props: ['contacts'] 
}) 

var ContactsList = Vue.component('contacts-list', { 
    template: ` 
    <div id="list"> 
    list 
    <div v-for="item in items"> 
     <div class="person"> 
      person 
      <span class="name">{{item.name}}</span> 
      <button class="trig">Show {{item.id}}</button> 
     </div> 
     <contact-view :contacts="item.contacts"> </contact-view> 
    </div> 
    </div>`, 
    computed: { 
    items: function(){ 
     return this.$parent.accounts 
    } 
    }, 
    components: { 
    'contact-view': Contact 
    } 
}) 


var app = new Vue({ 
    el: '#wrapper', 
    data: { 
    contacts: [], 
    currentView: 'index-page' 
    } 
}) 

app.currentView = 'contacts-list'; 
app.accounts = [{name: 'hello', id: 1}]; 

$(document).on("click", "button.trig", function(){ 
    alert('triggered'); 
    app.accounts[0].contacts = [{email: '123@ya.ru'}] 
}) 

を変更できないということです、コンポーネントは表示されません。変更されたデータ。どうやってこれを正しく行うことができますか？

Answer 1

Vue cannot detectプロパティをオブジェクトに動的に追加すると、このコードは、

app.accounts = [{name: 'hello', id: 1}]; 

では、動的ヴューにaccountsプロパティを追加しています。代わりに空の配列から始めます。このコードでも

data: { 
    contacts: [], 
    currentView: 'index-page', 
    accounts: [] 
} 

、

$(document).on("click", "button.trig", function(){ 
    alert('triggered'); 
    app.accounts[0].contacts = [{email: '123@ya.ru'}] 
}) 

以前contacts性質を持っていなかったオブジェクトにcontactsプロパティを追加しています。コードをこれに変更すると、動作します。

$(document).on("click", "button.trig", function(){ 
    alert('triggered'); 
    Vue.set(app.accounts[0],'contacts',[{email: '123@ya.ru'}]) 
}) 

私は、これらのすべては、Vueので行うことができますなど、あなたのデータにこれらの変更を行うためにjQueryのを使用することを選択している理由を、あなたのボタンのハンドラを設定するかわかりません。