Why the data on the components is not updated when opening another page ? (Vue.JS 2)

Question

I have 2 component

Component first like this : http://pastebin.com/M8Q3au0B

Because the code is a bit much, I use a pastebin

From component first, it call component two

component two is like this :

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

For example, I have two page

When in the page one, the results worked well

When I click page two, username, updated_at, comments also worked well

But, on the rating does not work. It does not update

How can I solve it?

Answer 1

I see list is being populated asynchronously, so it will not be available to starRating component when it first mounts. to get the value when it is populated, you may have to put a watcher on it like this:

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