Vue 2 - Mutating props vue-warn

ghz 1years ago ⋅ 3012 views

Question

I started https://laracasts.com/series/learning-vue-step-by-step series. I stopped on the lesson Vue, Laravel, and AJAX with this error:

vue.js:2574 [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: "list" (found in component )

I have this code in main.js

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

I know that the problem is in created() when I overwrite the list prop, but I am a newbie in Vue, so I totally don't know how to fix it. Does anyone know how (and please explain why) to fix it?

Answer

This has to do with the fact that mutating a prop locally is considered an anti-pattern in Vue 2

What you should do now, in case you want to mutate a prop locally , is to declare a field in your data that uses the props value as its initial value and then mutate the copy:

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

You can read more about this on Vue.js official guide

Note 1: Please note that [you should not use the same name for your prop and data](http://forum.vuejs.org/t/questions-regarding-handling- immutable-props-and-mutable-data-props/967/2?u=iraklisg), i.e.:

data: function () { return { list: JSON.parse(this.list) } } // WRONG!!

Note 2: Since [I feel there is some confusion](https://forum.vuejs.org/t/update-data-when-prop-changes-data- derived-from-prop/1517) regarding props and reactivity , I suggest you to have a look on this thread

#vue.js