[Vuejs]-Avoid mutating a prop directly, code works in vue1, but vue2 i get warn

by

0👍

A prop should be read only. The good practice, when you wanna write on a prop, is to store it’s value in a variable in data and then use that variable.

Here, I can see that the prop value is used as a v-model in your <input> and the prop value_t is written in your start_over and start_out methods.

You should instead do :

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
  };
},

And replace all the references to value and value_t with _value and _value_t like so :

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

Leave a comment