Vue.js：子コンポーネントを使用しているときにリストが更新されない

Question

子コンポーネントを使用しているときに問題が発生しています。

commentsの配列データが変更された場合、子コンポーネント<comment></comment>を使用するとリストは更新されません。

TopHeaderテンプレート：

<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コンポーネント：

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); 
      }); 
     } 
    } 
} 

私は子コンポーネントを使用している場合しかし、それは更新されません。

修正TopHeaderテンプレート：

<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> 

コメント子テンプレート：

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

コメント子コンポーネントは：

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

Answer 1

は、コンポーネント<comment>にv-for文を移動します。 ul-tagにv-forがあると、ulタグを繰り返します。例については、http://codepen.io/tuelsch/pen/YNOqYRを再度参照してください。

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