How to solve [Vue warn]: Avoid mutating a prop directly since the value will be overwritten on vue.js 2?

Question

My view is like this :

    ...
        
    ...

         


        

Answer 1

The warning suggests not modifying a prop's value directly as doing so you would lose the change anyway if the data at the parent component changes.

That said, here in your method:

methods: {
  rate: function (star) {
    var self = this;
    if (!this.disabled) {
        this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
            console.log('submitted');
        });
        this.temp_value = star;
        // return this.value = star; - remove this line
    }
  }
}

and add a computed property like so:

computed: {
  starValue () {
    return this.temp_value
  }
}