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组件没有正确更新

回答

相关问题