Question

我在Internet上找到了下面的代码，该代码很好用，但是我得到了Avoid mutating a prop directly..和value的{{1}}标签。我已经尝试将两者都放入数据或计算机中，但效果并不佳。有谁知道如何解决这个问题的好主意？提前致谢。

value_t

Answer 1

道具应该是只读的。想要编写道具时，好的做法是将其值存储在数据中的变量中，然后使用该变量。

在这里，我可以看到道具value在您的v-model中被用作<input>，道具value_t被写在您的start_over中，并且start_out种方法。

您应该这样做：

data: function() {
  return {
    temp_value: null,
    ratings: [1, 2, 3, 4, 5],

    // Props that I wanna write on (name them the way you want) 
    // -- and then use those in your component
    _value: this.value
    _value_t: this.value_t
  };
},

用value和value_t替换对_value和_value_t的所有引用，如下所示：

/***
     * Vue Component: Rating
     */
    Vue.component('star-rating', {
        props: {
            'name': String,
            'value': null,
            'value_t': null,
            'id': String,
            'disabled': Boolean,
            'required': Boolean
        },

        template: '<div class="star-rating">\
        <label class="star-rating__star" v-for="rating in ratings" :class="{\'is-selected\': ((_value >= rating) && _value != null), \'is-hover\': ((_value_t >= rating) && _value_t != 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" :value="rating" :name="name"  v-model="_value" :disabled="disabled"><i class="fas fa-star"></i></label></div>',

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

                // Props that I wanna write on (name them the way you want) 
                // -- and then use those in your component
                _value: this.value
                _value_t: this.value_t
            };
        },

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

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

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

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

            /*
             * Set the rating of the score
             */
            set: function set(value) {
                var self = this;

                if (!this.disabled) {
                    // Make some call to a Laravel API using Vue.Resource
                    this.temp_value = _value;
                    return this._value = _value;
                }
            }
        }
    });

避免直接更改道具，代码可在vue1中工作，但vue2我得到警告

1 个答案: