Избегайте мутации напрямую, код работает в vue1, но vue2 я получаю предупреждение - PullRequest
Новая
       14

Избегайте мутации напрямую, код работает в vue1, но vue2 я получаю предупреждение

0 голосов
/ 15 мая 2019

я нашел в интернете ниже код, который работает хорошо, но я получаю varn Avoid mutating a prop directly.. для 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]
                };
            },

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

1 Ответ

0 голосов
/ 15 мая 2019

Подставка должна быть только для чтения.Хорошей практикой, когда вы хотите написать на подпорке, является сохранение ее значения в переменной в данных, а затем использование этой переменной.

Здесь я вижу, что пропеллер 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;
                }
            }
        }
    });
...