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