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

? laravel에 한 요청은 아동에게 있으며 내 경험에 따라 아동의 변경 가능한 가치를 설정하고 요청이 잘 진행된 후에 부모에게 사건을 방출합니다. 그러나 실제로 부모에서 새 값을 전달하는 경우 자식 데이터가 생성 될 때 mutableValue은 value으로 설정되기 때문에 변경 가능한 값은 업데이트되지 않습니다. 이후의 변경 내용 value은 mutableValue (내 프로젝트에서 테스트 됨)을 변경하지 않습니다.