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（在我的项目中测试）。

Vue组件未正确更新

1 个答案: