Modifying information in a single array in Vue JS has a ripple effect on

I'm really struggling to understand what the ... want with this Vue component! Can someone please help me out? Here is my code:

var groupadding = new Vue({
el: '#groupAdd',
data:{
     currentFullData: [],
     localData: []
   },
   methods: {
     getDepartment() {
       var sendData = id; // just an example
       this.$http.post('some api', sendData, {emulateJSON: true})
       .then( resp => {
         this.currentFullData = resp.data;    
       }
     },
     getLocalDepartment() {
     this.localData = this.currentFullData;
     }
   }
})

In the 'currentFullData' object, for example I have 4 boolean fields: 'create', 'read', 'update', 'delete'

However, when these fields in 'localData' are changed, they also reflect in 'currentFullData'. Can anyone explain why this is happening?!?!?!

Answer №2

Thank you for bringing up this question. The issue at hand is unrelated to vue and the data values 'currentFullData' and 'localData'. Since your data variables are Arrays, assigning a value like

this.localData = this.currentFullData
means that this.localData becomes a reference to this.currentFullData. Consequently, any changes made to localData will impact currentFullData as well. To prevent this issue, it's advised to pass a reference of this.currentFullData to this.localData using
this.localData = this.currentFullData.slice()

If you'd like further insight on this topic, feel free to check out this array-related question on stackoverflow

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

creating sleek animations with Pixi.js for circular shapes

Is it possible to create smooth animations on circles or sprites similar to D3.js hits in Leaflet? https://drive.google.com/file/d/10d5L_zR-MyQf1H9CLDg1wKcvnPQd5mvW/view?usp=sharing While D3 works well with circles, the browser freezes. I am new to Pixi. ...

Custom sparkline array

In working on my sparkline chart, I have the following code snippet: <div sparkline="" values="4,4,7,5,9,6,4" data-type="line" data-height="80" data-width="100%" data-line-width="2" data-line-color="#dddddd" data-spot-color="#bbbbbb" data-fill-c ...

Combining two sets of elements in Java to form a Json using Jackson

Is there a way to combine two List of objects retrieved from the database into a single object in order to serialize with Jackson and deserialize in the view? ObjectMapper mapper = new ObjectMapper(); jsonTutorias = mapper.writeValueAsString(tuto ...

Permitted serverMiddleware hosts

I have developed a NUXT application and incorporated a serverMiddleware to handle REST endpoints and interact with my database. serverMiddleware: [ { path: "/api", handler: "~/api/index.js" }, ], I am now wondering how I can limit ac ...

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

Is it possible that the passing of Form Serialize and list to the controller is not functioning properly?

i am struggling with the following code in my controller: public ActionResult SaveWorkOrder(DTO_WorkOrder objWork, List<DTO_PartsWO> listTry) { //something } here is my model : public class DTO_WorkOrder { public string Id { get; set; ...

What is the process for utilizing AngularJS's multiple $http calls to retrieve data from a single PHP file?

I'm currently experimenting with multiple AngularJS ajax calls to a single php file in order to retrieve different json data based on the request. Below is the code snippet I am working with: var myApp = angular.module('myApp', []); myApp ...

moment.js conversions proving ineffective

My input field requires users to select a date and time. The local machine is either in GMT or BST depending on the time of year. For those unfamiliar with UK time changes: GMT (Greenwich Mean Time) is always equal to UTC BST (British Summer Time) is GM ...

The ActivatedRoute.routeConfig object appears to be empty in an Angular 2 project built with Angular-cli

Two projects I've created using angular-cli are working perfectly fine. However, in one of them, the routeConfig is showing as null and I can't figure out what's causing this issue. Both projects have identical package.json files, so there ...

Two functions are contained within an object: Function A and Function B. Function A calls Function B from within its own code

If I have two functions within an Object. Object = { Function1() { console.log('Function 1') }, Function2() { this.Function1() } } The Function1 is not being executed. Can someone explain why this is happening an ...

What is the correct way to establish the value of an editable div element?

When working with input and other elements that have a value, I usually use Object.getOwnPropertyDescriptor(input, 'value').set; followed by element.dispatchEvent(new Event('input', {bubbles: true})). However, this approach does not wor ...

Does Highchart offer support for drilling down into sub-categories?

I want to implement a sub-sub drill down feature in my Chart using the following code snippet. // Create the chart Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Highcharts m ...

Is there a way to access the active request being processed in a node.js environment?

I am currently working with express.js and I have a requirement to log certain request data whenever someone attempts to log a message. To accomplish this, I aim to create a helper function as follows: function logMessage(level, message){ winston.log(le ...

What is the process for enabling HLS.js to retrieve data from the server side?

I have successfully implemented a video player using hls.js, and I have some ts files stored in https:/// along with an m3u8 file. To read the content of the m3u8 file, I used PHP to fetch it and sent the data to JavaScript (res["manifest"] = the content ...

Creating a nested tree structure array from a flat array in Node.js

I have an array structure that I need to convert into a tree array using node.js. The current array looks like this: var data= [ { "id1": 1001, "id2": 1002, "id3": 1004, ... } ...

The Node module's package.json does not have a main "exports" defined

After recently adding the zx NPM package to my project, I encountered a puzzling issue. The installation went smoothly, and I proceeded to import it into my code: import { $ } from 'zx' (async () => { await $`mkdir test` })() However, u ...

Warning message will appear before navigating away from the page if vee-validate is

Wondering how to create a simple confirmation prompt asking if the user really wants to leave a page that includes a basic HTML form. The HTML Form: <!DOCTYPE html> <html> <head></head> <body> <div id="app"> ...

What is the best way to select an element that is currently visible but hidden underneath another element?

I have developed a circular graphic using primarily HTML and CSS, with some JavaScript and JQuery functionalities incorporated for text curving and planned interactions in the future. However, I've encountered an issue where clicking on the upper rig ...

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

Build a stopwatch that malfunctions and goes haywire

I am currently using a stopwatch that functions well, but I have encountered an issue with the timer. After 60 seconds, I need the timer to reset to zero seconds and advance to one minute. Similarly, for every 60 seconds that pass, the minutes should chang ...