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

ES6 scoping confusion: unraveling the mystery

Unable to incorporate an external JavaScript file via a static URL

Generating separators in every third row using an array of card elements

Open Zurb Foundation Reveal Modal from the bottom of the screen

Ensure that the form is submitted when a checkbox is clicked, while also maintaining the native browser

Leveraging Angular Dragula without the need for RequireJS

Encountering an issue with Meteor and node-celery: "Unable to access property 'slice' of null"

By incorporating JavaScript, clicking on an image will trigger a shift in the position of a different element

Effortlessly Display or Conceal Numerous Table Columns Using jQuery

Can you please provide guidance on how to dynamically add number values from an array to a select tag in Vue.js?

The HTTP request is being executed twice for some reason unknown to me

JavaScript and PHP are successfully displaying a success message despite the data not being saved to the database

Incorporating Java project dependencies into an npm project

What is the best way to hide the input field when there are multiple parent classes present?

Is there a way to integrate the javascript and jQuery functions in order to conceal a button?

Ways to display additional information in typeahead using Angular JS

Check out the ViewUI Vue.js component that expands to reveal more content!

Ways to retrieve information from a URL using the .get() method in a secure HTTPS connection

Inserting a file read using Node.js into a MongoDB database

Using PHP to send asynchronous requests to the server can greatly enhance