vue js übergibt Daten an untergeordnete Komponente

Question

Ich habe eine Kindkomponente contactView der Komponente contacts-list, die selbst ein Kind ist. Das Problem ist, dass ich nicht dynamisch den Inhalt dieser Komponente

html

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

js ändern

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'}] 
}) 

auf die Schaltfläche Nach einem Klick, wird die Komponente nicht angezeigt werden geänderte Daten Wie kann ich das richtig machen?

Answer 1

Vue cannot detect Wenn Sie Eigenschaften dynamisch zu einem Objekt hinzufügen. In diesem Code

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

Sie fügen die accounts Eigenschaft auf die Vue dynamisch. Beginnen Sie stattdessen mit einem leeren Array.

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

Auch in diesem Code

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

Sie die contacts Eigenschaft auf ein Objekt hinzufügen, die zuvor nicht eine contacts Eigenschaft. Wenn Sie Ihren Code ändern, wird es funktionieren.

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

Ich bin mir nicht sicher, warum Sie wählen jQuery zu verwenden, um diese Änderungen an Ihren Daten zu machen, stellen Sie den Handler für den Button, usw. Alle diese Faktoren können mit Vue erfolgen.