Vue.js：使用子组件时列表不更新答案

【问题标题】：Vue.js: List does not update when using child componentVue.js：使用子组件时列表不更新
【发布时间】：2017-02-08 10:47:41
【问题描述】：

我在使用子组件时遇到问题，列表不会根据传入的道具进行更新。

如果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,
    }
  }
}

【问题讨论】：

可能是因为ul 标签内的标签无效。见DOM Template Parsing Caveats。
@MathewJibin 关于 ul 和 li 中的无效标签是正确的。但我认为实际问题不在这里 - 它可能与您在数据模型中分配动态数据有关，所以事实上在您的情况下，您将所有内容都清空或未定义。任何控制台错误？
@MathewJibin - 使用 <li is="comment" :data="comment.data"></li> 仍然有同样的问题
@BelminBedak 没有控制台错误。它在第一次工作（设置数组），然后对于后续更改它不会更新视图
你能把子道具的名字从data改成别的名字，看看能不能用？

标签： javascript vue.js

【解决方案1】：

将v-for 语句移动到组件<comment>。使用 ul 标记上的 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>

【讨论】：