Vueコンポーネントが正しく更新されない

Question

ユーザーが店舗のレビューを残すことができる基本的なアプリがあります。新しいレビューが追加されるたびに、私はget_reviews（）関数を呼び出してリストを更新します。

すべて機能しますが、何らかの理由で星を管理するコンポーネントがリアルタイムで更新されず、適切な値を取得するためにページを更新する必要があります。私がページをリフレッシュしないと、新しいレビューで見られる星の数は最後に追加された星の数と同じです。ここで

は私のコンポーネントのコードです：

Vue.component('star-rating', { 

    props: { 
    'value': Number, 
    'name': String, 
    'id': String, 
    'disabled': Boolean, 
    'required': Boolean 
    }, 



    template: '<span class="star-rating">\ 
     <label class="star-rating__star" v-for="rating in ratings" \ 
     :class="{\'is-selected\': ((mutableValue >= rating) && mutableValue != null), \'is-disabled\': disabled}" \ 
     v-on:click="set(rating)" v-on:mouseover="star_over(rating)" v-on:mouseout="star_out">\ 
     <input class="star-rating star-rating__checkbox" type="radio" mutable-value="rating" name="name" \ 
     v-model="mutableValue" :disabled="disabled">★</label></span>', 

    /* 
    * Initial state of the component's data. 
    */ 
    data: function() { 
    return { 
     mutableValue: this.value, 
     temp_value: null, 
     ratings: [1, 2, 3, 4, 5] 
    }; 

    }, 

    methods: { 
    /* 
    * Behaviour of the stars on mouseover. 
    */ 
    star_over: function(index) { 
     var self = this; 

     if (!this.disabled) { 
     this.temp_value = this.mutableValuevalue; 
     return this.mutableValue = index; 
     } 

    }, 

    /* 
    * Behaviour of the stars on mouseout. 
    */ 
    star_out: function() { 
     var self = this; 

     if (!this.disabled) { 
     return this.mutableValue = this.temp_value; 
     } 
    }, 

    /* 
    * Set the rating of the score 
    */ 
    set: function(value) { 
     var self = this; 
     this.$parent.$emit('update_stars', value, this.disabled); 

     if (!this.disabled) { 
     // Make some call to a Laravel API using Vue.Resource 

     this.temp_value = value; 
     return this.mutableValue = value; 
     } 
    } 
    } 

}); 

そして、ここでは、私はそれを表示する方法である：

<div v-for="review in reviews" class="panel panel-default"> 

     <div class="panel-heading"> 
      ${review.vote} <!-- HERE I SEE THE RIGHT AMOUNT --> 
      <star-rating :value="review.vote" :disabled="true"> <!-- HERE I AM PASSING THE SAME AMOUNT BUT GETTING THE WRONG AMOUNT OF STARS --> 
      </star-rating> 
      <h4 style="display: inline-block !important; font-weight: bold !important;">${review.title}</h4> by 
      ${review.current_user_name} 
     </div> 
     <div class="panel-body"> 
.... 

Answer 1

なぜあなたは親コンポーネントに「合格」と言っていますか？ララベルへの要請は子供の中にあり、私の経験によれば、子供の可変価値を設定し、要求がうまくいった後で親にイベントを発信します。ただし、実際に親から新しい値を渡している場合は、mutableValueは子のデータが作成されるときにのみvalueに設定されるため、変更可能な値は更新されません。その後のvalueの変更はmutableValue（私のプロジェクトでテスト済み）に変更されません。