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

You're changing the value property here.

return this.value = star;

And possibly here.

v-model="value"

The warning means that whenever your view is re-rendered, the value property is going to be set to $data['rating'], overwriting whatever you did inside the start component.

Instead of mutating the property inside your component, when someone clicks a star, you probably want to $emit that the component has changed and let your view change $data['rating'], which will re-render the star component properly.

See the Vue documentation regarding component composition.