Vue.js: Die Liste wird nicht aktualisiert, wenn die untergeordnete Komponente verwendet wird

Question

Ich habe ein Problem, wenn eine untergeordnete Komponente verwendet wird. Eine Liste wird nicht basierend auf einer darin übergebenen Komponente aktualisiert. Wenn sich die Array-Daten comments ändern, wird die Liste nicht aktualisiert, wenn eine untergeordnete Komponente verwendet wird.

TopHeader Vorlage:

<template> 
    <ul v-for="comment in comments"> 

     // If don't use a child component, it updates whenever `comments` array changes: 

     <li> 
      <div> 
       /r/{{comment.data.subreddit}} · 
       {{comment.data.score}} 
      </div> 
      <div class="comment" v-html="comment.data.body"></div> 
      <hr> 
     </li> 

    </ul> 
</template> 

TopHeader Komponente:

import Comment from 'components/Comment' 

export default { 
    name: 'top-header', 
    components: { 
     Comment 
    }, 
    data() { 
    return { 
     username: '', 
     comments: [] 
    } 
    }, 
    methods: { 
     fetchData: function(username){ 
      var vm = this; 
      this.$http.get(`https://www.reddit.com/user/${username}/comments.json?jsonp=`) 
      .then(function(response){ 
       vm.$set(vm, 'comments', response.body.data.children); 
      }); 
     } 
    } 
} 

Wenn ich jedoch eine untergeordnete Komponente verwenden Sie es nicht aktualisiert.

Modified TopHeader Vorlage:

<template> 
    <ul v-for="comment in comments"> 

     // If I instead use a component with prop data, it does not update 
     <comment :data="comment.data"></comment> 

    </ul> 
</template> 

Kommentar Kind Vorlage:

<template> 
    <li> 
     <div> 
      /r/{{subreddit}} · 
      {{score}} 
     </div> 
     <div class="comment" v-html="body"></div> 
     <hr> 
    </li> 
</template> 

Kommentar Kind Komponente:

export default { 
    name: 'comment', 
    props: ['data'], 
    data() { 
    return { 
     body: this.data.body, 
     subreddit: this.data.subreddit, 
     score: this.data.score, 
    } 
    } 
} 

Answer 1

Bewegen Sie den v-for Anweisung an die Komponente <comment>. Mit dem v-for auf dem UL-Tag würden Sie das UL-Tag wiederholen. Ein weiteres Beispiel finden Sie unter .

<div id="app"> 
    <button v-on:click="fetch">Fetch data</button> 
    <ul> 
     <comment v-for="comment in comments" v-bind:comment="comment" /> 
    </ul> 
</div>