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?!?!?!

javascriptvue.js

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

How to select an unwrapped element using the v-popover component

The v-popover component is commonly used by wrapping an element inside of it, like so: <v-popover offset="0" placement="right"> <span>My awesome span</span> <template slot="popover">My awesome popov ...

vue.jsv-tooltip

Can variables in JavaScript clash with input names in HTML?

I have the following code in an HTML file: <input type="..." name="myInput1" /> Then, in a JS file associated with this HTML file, I declare a variable to store the value of that input after it loses focus: var myInput1; Should I be concerned abo ...

javascripthtmldom

Methods for incorporating external javascript.php files into CodeIgniter 2.1.3

Let's kick off this topic by discussing the following: I've discovered that it is possible to use PHP with external Javascript, as shown here. This leads me to believe that there could be a way to echo JavaScript within a file named javascript. ...

phpjavascriptjquerycodeigniter

Top method for utilizing overlays

Is there a method to randomly select hex codes for specific colors? I want to replicate the design in this image through coding. Image Here is the code I have so far: HTML <div id="group"> <div class="sub red panel"> </div><!--su ...

javascriptjqueryhtmlcss

What are the best practices for sharing context in express and typescript?

Implementing a solution to expose a value to all request handlers using express and typescript is my goal. I am looking for a way to easily "inject" this value from a middleware or an alternative method that allows for simple mocking if needed. Here is th ...

javascriptnode.jstypescriptexpressdependency-injection

Establishing the bottom limit for the vertical axis on a column chart with the Visualization Google API

I am currently working on implementing the Google Chart API alongside AngularJS. I attempted to adjust the min property of the vertical axis for my column chart to 0 using the following code: var dataMois = CaDuMois.query(function(){ $scope.comparat ...

javascriptangularjsgoogle-apigoogle-visualization

Struggling to efficiently handle imported JSON data using VUE.JS JavaScript?

Struggling to extract specific information from JSON data that I need to import. Here is the sample data I'm working with: I am trying to extract details like the name, description, and professor for each entry. This is how I'm importing the d ...

javascriptjsonparsingvue.jsjavascript-objects

Customizing the JavaScript Calendar in Qualtrics

I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question. Specify a date for the survey: <link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" /> <script sr ...

javascriptqualtrics

Sending Component Properties to Objects in Vue using TypeScript

Trying to assign props value as an index in a Vue component object, here is my code snippet: export default defineComponent({ props:{ pollId:{type: String} }, data(){ return{ poll: polls[this.pollId] } } }) Encountering errors wh ...

typescriptvue.js

Managing Pop-Ups when browsing on Internet Explorer

I've been working on an Excel VBA macro that automates several tasks on the Medicare website. The macro opens IE, logs in, compares claims, and alerts me to any differences found. However, I've encountered a problem during the log-in step, specif ...

javascriptexcelautomationalertvba

Guide on creating a conditional column in a kendo UI grid with the use of AngularJS

Is there a way to dynamically add a column to the Kendo UI grid based on JSON data? Consider the following JSON input: [{ "ProductID": 1, "ProductName": "Chai", "Supplier": { "SupplierID": 1, "SupplierName": "Exotic Liquid ...

javascriptjqueryangularjskendo-uikendo-grid

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

javascriptreactjs

Using the power of JavaScript to iterate through elements with the

Looking for a way to integrate JSON data into your simple bootstrap page? Here's a script that might help: Take a look at the following script: var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && ...

javascriptjsonajaxtwitter-bootstrap

Guide on dynamically importing images using the Nuxt.js and jQuery script

<template> <div> <select ref='select'> <slot></slot> </select> </div> </template> <script> import Vue from "vue" export default { name: " ...

jqueryvue.jsnuxt.jsjquery-select2

Shift all content to the right when viewing on mobile devices

I'm looking to create space for a menu on the left side, similar to the one on Mashable's mobile view. How can I move all the content to the right? Feel free to resize the window and compare with . Thank you. Best regards, Marius ...

javascriptjquerycsshtml

I'm trying to determine which jQuery event would be more beneficial for my needs - should I go with

I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...

javascriptjquerycssevents

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

On my HTML invoice table, I sometimes have empty elements that cause the row to misalign. To fix this, I want to add whitespace if an element is empty. Here is the structure of the table: <div class="invoiceTable"> <div class="titles2" style=" ...

javascriptjqueryhtml

I have noticed in my procedures that the calculations are not performed until the second digit is entered into the input values

Warning: The value "NaN" entered is not a valid number. Please ensure it matches the required regular expression format: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)? When values are inputted into the quantity and rate fields, the expected ...

vue.jsmethods

What is the method to display the Vue.js component's identifier?

Here is a link to an official document: https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component Below is a demonstration of a simple todo list: Vue.component('todo-item', { template: '\ <li>\ {{ titl ...

javascriptjqueryvue.jsvuejs2

Tips for implementing validation in AngularJS

Could someone help me with AngularJS validation? I'm new to it and trying to make sure everything is correct. var app=angular.module('myApp',[]) app.controller('myController',function($scope){ $scope.clickMe = function(){ if($(& ...

javascriptjqueryangularjs