Avoid mutating a prop directly

Question

I am getting warning:

app.js:87486 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "likescount"

My Blade

        <path-like-toggle likescount="{{$path->likeCount}}" isliked="{{$path->canBeunLiked()}}" path="{{$path->slug}}" type="{{$path->type}}" ></path-like-toggle>

Vue Code

      props:['isliked','path','type','likescount']
    ,
methods:{
         like () {
             axios.post(`/${this.type}/${this.path}/like/`)
                this.likingStatus = true;
                this.likescount ++;
        },
         unlike () {
             axios.post(`/${this.type}/${this.path}/unlike/`)
                this.likingStatus = false;
                this.likescount --;

        },
    }

Possible duplicate of [Vue 2 - Mutating props vue-warn](https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn) — str, Jun 25 '19 at 11:35

score 3 · Accepted Answer · answered Jun 25 '19 at 11:29

3

Initialise a data attribute from your prop, and manipulate that.

export default {
    data() {
        return {
            numberOfLikes: this.likescount
        }
    },

    props: [
        'isliked',
        'path',
        'type',
        'likescount'
    ],

    methods:{
        like() {
            axios.post(`/${this.type}/${this.path}/like/`);

            // ...

            this.numberOfLikes++;
        },

        unlike() {
            axios.post(`/${this.type}/${this.path}/unlike/`);

            // ...

            this.numberOfLikes--;
        },
    }
}

answered Jun 25 '19 at 11:29

Jack Robertson

373
2
7

1

It doesn't seem like the component in the example has a parent component, the value of the prop is passed directly from the server when the page is rendered. The prop is also static (not bound to the Vue instance with `v-bind`) which means that Vue wouldn't be able to manipulate it's value even if it had a parent. So in this specific case, your method is not possible. – Jack Robertson Mar 02 '20 at 13:27

score 0 · Answer 2 · answered Jun 25 '19 at 11:23

0

Just as the warning says you shall not mutate props, remove this.likescount ++; this.likescount --;

and this will remove the warning ... your props should be pure

answered Jun 25 '19 at 11:23

ehab

7,162
1
25
30

Avoid mutating a prop directly

2 Answers2

Linked