Does Vue.js have a built in way to add a copy of a persistent object to a repeated array

by

See this issue on GitHub.

Shallow Clone

I was using jQuery’s $.extend until Evan You pointed out there is an undocumented built it extend function Vue.util.extend that does a shallow clone. So what you could use is:

addItem: function(e) {
  e.preventDefault();

  this.items.push(Vue.util.extend({}, this.newItem));
}

See the updated Fiddle.

Deep Clone

When doing a shallow clone on an object that references other objects you copy the references to the external objects instead of cloning them. To clone the object completely do a Deep Clone.

For the deep clone, per Evan’s suggestion in the first link, one could use: JSON.parse(JSON.stringify(object)). This can be seen between this fiddle and this fiddle.

If using lodash check out lodash cloneDeep. If using NPM check out clone-deep.

More Related Contents:

  1. Use arrow function in vue computed does not work
  2. How to add external JS scripts to VueJS Components?
  3. How to use .env variables in Nuxt 2 or 3?
  4. Vue 2 – Mutating props vue-warn
  5. VueJS: why is “this” undefined?
  6. Make VueJS and jQuery play nice
  7. How to reference static assets within vue javascript
  8. Can you force Vue.js to reload/re-render?
  9. VueJs 2.0 emit event from grand child to his grand parent component
  10. Can I pass parameters in computed properties in Vue.Js
  11. Static image src in Vue.js template
  12. How to call function on child component on parent events
  13. forEach is not a function error with JavaScript array
  14. Vuejs typescript this.$refs..value does not exist
  15. How to use any icons with Nuxt3?
  16. How to install jQuery into Nuxt.js?
  17. Is there a proper way of resetting a component’s initial data in vuejs?
  18. Can vue-router open a link in a new tab?
  19. Two components binding Vuejs
  20. Parentheses while calling a method in Vue
  21. Module not found: Error: Can’t resolve vue, path not correct
  22. forEach loop through two arrays at the same time in javascript
  23. Vue js error: Component template should contain exactly one root element
  24. How to use any icons with Nuxt or Vue?
  25. Add global variable in Vue.js 3
  26. How to set a component non-reactive data in Vue 2?
  27. multiple pages in Vue.js CLI
  28. Vue.js unknown custom element
  29. How to navigate using vue router from Vuex actions
  30. What’s the correct way to pass props as initial data in Vue.js 2?

Leave a Comment