避免直接突变道具，代码在VUE1中起作用，但是VUE2我会被警告

Question

我在下面的Internet中找到了效果很好，但是我得到了value和value_t的VARN Avoid mutating a prop directly..。我已经试图将数据放入数据或计算中，但是它的工作真的不错。有人一个好主意如何解决这个问题吗？提前致谢。

/***
         * 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]
                };
            },
            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;
                    }
                }
            }
        });

Answer 1

应仅读取道具。当您想在道具上写入时的好习惯是将其值存储在数据中的变量中，然后使用该变量。

在这里，我可以看到Prop value在您的<input>中用作v-model，并且Prop 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;
                }
            }
        }
    });