I'm encountering an issue when utilizing a child component, the list fails to update based on a prop that is passed into it.
When there are changes in the comments array data, the list does not reflect those updates if it uses the child component <comment></comment>.
Template for TopHeader:
<template>
<ul v-for="comment in comments">
// When not using a child component, it updates every time the `comments` array is modified:
<li>
<div>
/r/{{comment.data.subreddit}} ·
{{comment.data.score}}
</div>
<div class="comment" v-html="comment.data.body"></div>
<hr>
</li>
</ul>
</template>
TopHeader component details:
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);
});
}
}
}
However, the problem arises when I introduce a child component.
Updated TopHeader template:
<template>
<ul v-for="comment in comments">
// Instead of directly rendering, I use a component with prop data, but it doesn't get updated
<comment :data="comment.data"></comment>
</ul>
</template>
Template for Comment child component:
<template>
<li>
<div>
/r{{subreddit}} ·
{{score}}
</div>
<div class="comment" v-html="body"></div>
<hr>
</li>
</template>
Details of Comment child component:
export default {
name: 'comment',
props: ['data'],
data() {
return {
body: this.data.body,
subreddit: this.data.subreddit,
score: this.data.score,
}
}
}