Is there a native feature in Vue.js that allows for the addition of a duplicate of a constantly saved object to an array that is repeated

Question

Is there a native feature in Vue.js that allows for the addition of a duplicate of a constantly saved object to an array that is repeated

Having an issue with my Vue.js app where adding a newItem to a list of items results in the added object being bound to the input. Here's what I've tried so far:

new Vue({
  el: '#demo',

  data: {
    items: [
      {
        start: '12:15',
        end: '13:15',
        name: 'Whatch Vue.js Laracast',
        description: 'Watched the Laracast series on Vue.js',
        tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
        note: "Vue.js is really awesome. Thanks Evan You!!!"
      },
      {
        start: '13:15',
        end: '13:30',
        name: "Rubik's Cube",
        description: "Play with my Rubik's Cube",
        tags: ['Logic', 'Puzzle', "Rubik's Cube"],
        note: "Learned a new algorithm."
      }
    ],
    newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''}
  },

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

      this.items.push(this.newItem);
    }
  }
});

Although pushing the object as is onto the array works, it remains bound to the input causing issues. Desired outcome is to add a copy of the object that won't change when the input does. Check out this this fiddle. One way I found solution is by doing:

addItem: function(e) {
  e.preventDefault();
  this.items.push({
    name:        this.newItem.name,
    start:       this.newItem.start,
    end:         this.newItem.end,
    description: this.newItem.description,
    tags:        this.newItem.tags,
    notes:       this.newItem.notes
  })
}

This alternative method however involves a lot of repetitions.

The main question: Is there any built-in functionality within Vue.js to add just a copy of the object instead of persisting the original object?

javascript vue.js

Answer 1

Answer №1

Take a look at this particular issue on GitHub.

Surface-Level Replication

I had been utilizing jQuery's $.extend until I learned from Evan You about an unpublicized built-in extend function Vue.util.extend that accomplishes surface-level replication. Here is an example of how you can apply it:

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

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

View the revised Fiddle for demonstration.

In-Depth Replication

When performing a surface-level clone on an object that contains references to other objects, you are actually duplicating the references to those external objects rather than cloning them. To fully replicate the object, you need an In-Depth Clone.

For an in-depth clone, as Evan mentioned in the initial link, one could utilize:

JSON.parse(JSON.stringify(object))

. This difference can be observed between this fiddle and this fiddle.

If you are using lodash, explore lodash cloneDeep. For NPM users, consider checking out clone-deep.

Answer 2

Take a look at this particular issue on GitHub.

Surface-Level Replication

I had been utilizing jQuery's $.extend until I learned from Evan You about an unpublicized built-in extend function Vue.util.extend that accomplishes surface-level replication. Here is an example of how you can apply it:

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

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

View the revised Fiddle for demonstration.

In-Depth Replication

When performing a surface-level clone on an object that contains references to other objects, you are actually duplicating the references to those external objects rather than cloning them. To fully replicate the object, you need an In-Depth Clone.

For an in-depth clone, as Evan mentioned in the initial link, one could utilize:

JSON.parse(JSON.stringify(object))

. This difference can be observed between this fiddle and this fiddle.

If you are using lodash, explore lodash cloneDeep. For NPM users, consider checking out clone-deep.

Answer 3

Answer №2

Unfortunately, this approach did not yield the desired results for my project which utilizes vue 1.0.13. I found a workaround by creating a duplicate of the item without any data bindings like so:

this.items.push( JSON.parse( JSON.stringify( newItem ) ) );

Answer 4

Unfortunately, this approach did not yield the desired results for my project which utilizes vue 1.0.13. I found a workaround by creating a duplicate of the item without any data bindings like so:

this.items.push( JSON.parse( JSON.stringify( newItem ) ) );

Answer 5

Answer №3

LATEST UPDATE:

To create a clone without object references, consider using structuredClone:

  addItem: function(e) {
    e.preventDefault();
  
    this.items.push(structuredClone(this.newItem));
  }

ANOTHER OPTION:

An alternative approach is to utilize Object Spread:

  addItem: function(e) {
    e.preventDefault();
  
    this.items.push({...this.newItem});
  }

PREVIOUS METHOD:

If you prefer, you can stick with Vanilla JavaScript and Object.assign():

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

    this.items.push(Object.assign({}, this.newItem));
  }

Answer 6

LATEST UPDATE:

To create a clone without object references, consider using structuredClone:

  addItem: function(e) {
    e.preventDefault();
  
    this.items.push(structuredClone(this.newItem));
  }

ANOTHER OPTION:

An alternative approach is to utilize Object Spread:

  addItem: function(e) {
    e.preventDefault();
  
    this.items.push({...this.newItem});
  }

PREVIOUS METHOD:

If you prefer, you can stick with Vanilla JavaScript and Object.assign():

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

    this.items.push(Object.assign({}, this.newItem));
  }

Answer 7

Answer №4

The answer at the top is inaccurate. Vue.util.extend is not related to jQuery's extend and only performs a shallow clone. Visit here for more information

Object.assign and the Spread operator also result in shallow copies. You can learn more about this here

To achieve a deep clone, consider using Ramda.js' implementation See implementation details here

If you do not require _curry, you can omit it.

For further insights on efficient ways to perform a deep clone of an object in JavaScript, check out this MVA: What is the most efficient way to deep clone an object in JavaScript?

Answer 8

The answer at the top is inaccurate. Vue.util.extend is not related to jQuery's extend and only performs a shallow clone. Visit here for more information

Object.assign and the Spread operator also result in shallow copies. You can learn more about this here

To achieve a deep clone, consider using Ramda.js' implementation See implementation details here

If you do not require _curry, you can omit it.

For further insights on efficient ways to perform a deep clone of an object in JavaScript, check out this MVA: What is the most efficient way to deep clone an object in JavaScript?

Answer 9

Answer №5

structuredClone is a useful method, but there's a catch. It doesn't work with Proxies, which Vue 3 uses for reactivity. To clone an object using structuredClone in Vue 3, you first need to get the raw target and then clone it like this:

import { toRaw } from 'vue'
...
const copiedObject = structuredClone(toRaw(originalObject))

Answer 10

structuredClone is a useful method, but there's a catch. It doesn't work with Proxies, which Vue 3 uses for reactivity. To clone an object using structuredClone in Vue 3, you first need to get the raw target and then clone it like this:

import { toRaw } from 'vue'
...
const copiedObject = structuredClone(toRaw(originalObject))

Answer 11

Answer №6

Implementing lodash library

import _ from 'lodash';


let clonedData = _.cloneDeep(this.formDataInitial);

let mergedData = _.merge(_.cloneDeep(this.formData), { filters: _.cloneDeep(this.formDataInitial.filters) });

Answer 12

Implementing lodash library

import _ from 'lodash';


let clonedData = _.cloneDeep(this.formDataInitial);

let mergedData = _.merge(_.cloneDeep(this.formData), { filters: _.cloneDeep(this.formDataInitial.filters) });

Is there a native feature in Vue.js that allows for the addition of a duplicate of a constantly saved object to an array that is repeated

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Implementing lodash library

Similar questions

Initiate the month transition event within the fomantic calendar

React's Conditional Rendering

What is the best way to link a generated PHP-AJAX link with a jQuery action?

Retrieve the part of a displayed element

What distinguishes res.send from app.post?

Can I update a label using ajax from the controller?

Save information in a session using html and javascript

Eslint can halt the Vue project build process if it encounters any errors

Executing ESM-Enabled Script in Forever

Use an inline style to apply a background image by utilizing a ternary operator

Adjust the color of an SVG icon depending on its 'liked' status

Tips on dividing a div into two separate pages when converting to PDF

Guide on accessing values from an array of objects in JavaScript/Node.js

Retrieve the link of a nearby element

Authentication through Proxy and requests from nodes

CSS and Javascript functioning correctly within internal server, but encountering issues when accessed externally

Reconfigure the API to segment its components into individual variables

Regardless of the circumstances, the Node.js PATCH request will always run

What's the best way to retrieve the id or index of a card within a list?

What is the best way to apply a filter to an array of objects nested within another object in JavaScript?