为什么打开另一个页面时组件上的数据没有更新？ (Vue.JS 2)

Question

我有 2 个组件

组件首先是这样的：http://pastebin.com/M8Q3au0B

因为代码有点多，我用了一个pastebin

首先从组件调用组件二

组件二是这样的:

<template>
    <span class="rating">
        <template v-for="item in items">
            <label class="radio-inline input-star" :class="{'is-selected': ((starValue >= item.value) && starValue !== null)}">
                <input type="radio" class="input-rating"v-model="starValue">
            </label>
        </template>
    </span>
</template>
<script>
    export default {
        props: {'star': null,'store': null,'id': null}, 
        data() {
            return {
                items: [{value: 5},{value: 4},{value: 3},{value: 2},{value: 1}],
                starValue: this.star
            }
        }
    }
</script>

比如我有两个页面

在第一页时，效果很好

当我点击第二页时，用户名，updated_at，评论也很有效

但是，在评级上不起作用。它不更新

我该如何解决？

Answer 1

我看到 list 正在异步填充，因此 starRating 组件在首次安装时将不可用。要在填充时获取值，您可能必须像这样在其上放置 watcher：

<script>
    export default {
        props: {'star': null,'store': null,'id': null}, 
        data() {
            return {
                items: [{value: 5},{value: 4},{value: 3},{value: 2},{value: 1}],
                starValue: this.star
            }
        },
        watch : {
           star: function(newVal) {
                this.starValue = newVal
           }
        }  
    }
</script>