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

将v-for语句移至组件<comment>。使用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>

Vue.js：使用子组件时List不会更新

1 个答案: