link274 link275 link276 link277 link278 link279 link280 link281 link282 link283 link284 link285 link286 link287 link288 link289 link290 link291 link292 link293 link294 link295 link296 link297 link298 link299 link300 link301 link302 link303 link304 link305 link306 link307 link308 link309 link310 link311 link312 link313 link314 link315 link316 link317 link318 link319 link320 link321 link322 link323 link324 link325 link326 link327 link328 link329 link330 link331 link332 link333 link334 link335 link336 link337 link338 link339 link340 link341 link342 link343 link344 link345 link346 link347 link348 link349 link350 link351 link352 link353 link354 link355 link356 link357 link358 link359 link360 link361 link362 link363 link364 link365 link366 link367 link368 link369 link370 link371 link372 link373 link374 link375 link376 link377 link378 link379 link380 link381 link382 link383 link384 link385 link386 link387 link388 link389 link390 link391 link392 link393 link394 link395 link396 link397 link398 link399 link400 link401 link402 link403 link404 link405 link406 link407 link408 link409 link410

[Vue.js] Avoid mutating a prop directly, code works in vue1, but vue2 i get warn

i found in internet below code which works nice, but i get a varn Avoid mutating a prop directly.. for value and value_t. I already tried to put both in data or in computed, but it doesn’t work really good. Have anybody a good idea how to solve this problem?
thanks in advance.

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

Solution :

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 the <input> and the prop value_t is written in the 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 the 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.js 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 the 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;
}
}
}
});