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]'}]
})
點擊按鈕後,該組件不顯示改變了數據。我怎樣才能正確地做到這一點?
JQuery只是一個例子。你提出的方法不適合我,https://jsfiddle.net/mcfpgkyo/3/ –
@ Marsel.V你也在動態地添加'accounts'。我更新了答案。 https://jsfiddle.net/mcfpgkyo/4/ – Bert