What’s the correct way to pass props as initial data in Vue.js 2?

by

Thanks to this https://github.com/vuejs/vuejs.org/pull/567 I know the answer now.

Method 1

Pass initial prop directly to the data. Like the example in updated docs:

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

But have in mind if the passed prop is an object or array that is used in the parent component state any modification to that prop will result in the change in that parent component state.

Warning: this method is not recommended. It will make your components unpredictable. If you need to set parent data from child components either use state management like Vuex or use “v-model”. https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Method 2

If your initial prop is an object or array and if you don’t want changes in children state propagate to parent state then just use e.g. Vue.util.extend [1] to make a copy of the props instead pointing it directly to children data, like this:

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

Method 3

You can also use spread operator to clone the props. More details in the Igor answer: https://stackoverflow.com/a/51911118/3143704

But have in mind that spread operators are not supported in older browsers and for better compatibility you’ll need to transpile the code e.g. using babel.

Footnotes

[1] Have in mind this is an internal Vue utility and it may change with new versions. You might want to use other methods to copy that prop, see How do I correctly clone a JavaScript object?.

My fiddle where I was testing it:
https://jsfiddle.net/sm4kx7p9/3/

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. Vuex state on page refresh
  5. Vuejs and Vue.set(), update array
  6. [Vue warn]: Property or method is not defined on the instance but referenced during render
  7. How to watch store values from vuex?
  8. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  9. How to call function on child component on parent events
  10. How to listen for ‘props’ changes
  11. Passing props dynamically to dynamic component in VueJS
  12. Accessing Vuex state when defining Vue-Router routes
  13. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  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. Vue template or render function not defined yet I am using neither?
  22. Global data with VueJs 2
  23. Passing props with programmatic navigation Vue.js
  24. Vue.js – update router view
  25. How to use Vuetify tabs with vue-router
  26. Force download GET request using axios
  27. Importing javascript file for use within vue component
  28. When should I use Vuex?
  29. VueJS conditionally add an attribute for an element
  30. Vue.js – Add class to clicked button

Leave a Comment