Vue 2 – Mutating props vue-warn

by

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, i.e.:

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

Note 2: Since I feel there is some confusion regarding props and reactivity, I suggest you to have a look on this thread

More Related Contents:

  1. Vue.js dynamic images not working
  2. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  3. Communication between sibling components in Vue.js 2.0
  4. VueJS: why is “this” undefined?
  5. Vuex state on page refresh
  6. Vuejs and Vue.set(), update array
  7. [Vue warn]: Property or method is not defined on the instance but referenced during render
  8. How to watch store values from vuex?
  9. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  10. How to listen for ‘props’ changes
  11. Accessing Vuex state when defining Vue-Router routes
  12. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  13. Vuejs typescript this.$refs..value does not exist
  14. Vue.js: Conditional class style binding
  15. Is there any way to ‘watch’ for localstorage in Vuejs?
  16. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  17. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  18. Access vue instance/data inside filter method
  19. Vue v-on:click does not work on component
  20. Methods vs Computed in Vue
  21. Passing props with programmatic navigation Vue.js
  22. Vue.js – update router view
  23. How to use Vuetify tabs with vue-router
  24. Force download GET request using axios
  25. Importing javascript file for use within vue component
  26. How to limit iteration of elements in `v-for`
  27. Detect Back Button in Navigation Guards of Vue-Router
  28. When should I use Vuex?
  29. VueJS conditionally add an attribute for an element
  30. How to pass an object as props with vue router?

Leave a Comment