Vue 2 - Mutating props gives warning - Ednsquare

Question

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 <task>) 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. Anyone have an idea how (and please explain why) to fix it?

Aditya Agrawal · Accepted 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 datathat 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

Sumit Sharma · Answer

Vue just warns you: you change the prop in the component, but when parent component re-renders, "list" will be overwritten and you lose all your changes. So it is dangerous to do so. Use computed property instead like this: Vue.component('task', { template: '#task-template', props: ['list'], computed: { listJson: function(){ return JSON.parse(this.list); } } });

Vue JS

Vue 2 - Mutating props gives warning

Similar Questions

Vue js error: Component template should contain exactly one root element

How to call a Vue.js component method from outside the component?

Arrow function in vue computed does not working

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram