2017-06-26 93 views
0

我有一個組件contacts-list的子組件contactView,它本身就是一個子組件。的問題是,我不能動態地改變該組件的內容vue js將數據傳遞給子組件

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: '[email protected]'}] 
}) 

點擊按鈕後,該組件不顯示改變了數據。我怎樣才能正確地做到這一點?

回答

1

Vue cannot detect當您將屬性動態添加到對象時。在這段代碼中,

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

要動態添加accounts屬性的Vue公司。相反,從一個空數組開始。

data: { 
    contacts: [], 
    currentView: 'index-page', 
    accounts: [] 
} 
在這段代碼

此外,

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

要添加contacts屬性的對象,以前沒有一個contacts財產。如果你改變你的代碼,它會起作用。

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

我不知道爲什麼你選擇使用jQuery來進行這些更改您的數據,設置處理您的按鈕等,所有這些都可以與Vue公司來完成。

+0

JQuery只是一個例子。你提出的方法不適合我,https://jsfiddle.net/mcfpgkyo/3/ –

+1

@ Marsel.V你也在動態地添加'accounts'。我更新了答案。 https://jsfiddle.net/mcfpgkyo/4/ – Bert