Vue組件沒有正確更新

我有一個基本的應用程序，用戶可以在其中爲商店留下評論。每次添加新評論時，我都會調用get_reviews（）函數並更新列表。Vue組件沒有正確更新

一切正常，但由於某些原因，管理星星的組件不會實時更新，我必須刷新頁面才能獲得正確的值。如果我不刷新頁面，那麼我在新評論中看到的星星數量與最後添加的星星數量相同。

這裏是我的組件代碼：

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

來源

2016-11-13 Tom00

您是否可以複製此問題在JSFiddle或JSbin上？ –

你爲什麼說在父組件「過客」？向laravel提出的請求是在孩子身上，並根據我的經驗，在請求正常工作後，將可變值設置給孩子並向父母發送事件。但是，如果您真的從父項中傳遞新值，則可變值不會更新，因爲在創建子項的數據時，mutableValue只會設置爲value。道具value的後續更改不會更改mutableValue（在我的項目中進行測試）。

來源

2016-11-17 08:35:16

Vue組件沒有正確更新

回答

相關問題