The VueJs Method has the ability to directly alter a given response

Within my parent component, I am connecting to the backend using a query. Through interactions with the navbar and utilizing my activeView data in the parent component, I trigger the rendering of a new child page upon clicks and pass a prop from the response by employing v-if in vue. Strangely, one of the functions within this process is causing a change not only in the prop in the parent component but also altering my response. How is this possible?

beforeMount() {
    console.log(this.plansPropOrg);
    this.plansProp = this.plansPropOrg;
    this.tempPlan = this.plansProp.currentPlan;

    console.log(this.plansProp);
    this.propsToData();
}

The function at fault here seems to be propsToData - when I comment it out, everything behaves as expected, but I need to include it.

Now let's look at how my parent component behaves when making the query:

await axios.post("xxxxx/yyyyyyy").then(res => {
                console.log("heyyo");
                console.log(res);
                this.plansData = res.data.data;
                console.log(this.plansData);
            });

In the propsToData method, a simple task is performed - translating boolean values into English. However, when the condition is true in the response, I notice that the values are being displayed as translations.

propsToData() {
        //TODO: Change the 'if' statement to 'ifsubscriber'
        console.log("AAA");
        console.log(this.plansProp);
        if (this.plansProp.isSubscriber) {
            console.log("BBBBB");
            this.plansProp.currentPlan.analytics
                ? (this.plansProp.currentPlan.analytics = this.$t(
                      "settings.plans.active"
                  ))
                : (this.plansProp.currentPlan.analytics = this.$t(
                      "settings.plans.inactive"
                  ));
         }
   }

This unexpected behavior is leaving me puzzled - how is it possible for it to alter the original response?

Answer №1

When you duplicate the response and the plansProp object, they are copied by reference. This means both objects point to the same location in memory. Any changes made to one object will reflect in the other since they share the same memory location.

To create a copy without this connection, you can either perform a shallow copy using Object.assign() or a deep copy with JSON.parse(JSON.stringify()), depending on your object's structure.

For more detailed information, visit .

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

Is there a way to call class methods from external code?

I am seeking clarification on Class files. Below is an example of a Class that I have: class CouchController { constructor(couchbase, config) { // You may either pass couchbase and config as params, or import directly into the controller ...

The MathJax system is currently unable to process LaTeX environments

Currently, I am in the process of creating a blog post on Blogspot. Here is the MathJax configuration that I have integrated into the theme's HTML file: <script defer='defer' id='MathJax-script' src='https://cdn.jsdelivr.ne ...

Revamp the design of the Google image layout

I am trying to replicate the layout of a Google search results page. My goal is to have a full-width div appear on screen when an image is clicked, with a small triangle at the bottom of the clicked image. I attempted to place the img inside another div, ...

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

My setup consists of a single parent component and 2 child components structured as follows: Parent-component.html <child-component-1 [id]="id"></child-component-1> <child-component-2></child-component-2> The child-compo ...

Forgetting your password with React JS

On my login page, there is a button labeled "Forget my password". When I click on this button, I want to be taken directly to the correct page for resetting my password. Currently, when I click on "forget my password", it displays beneath the login sectio ...

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

Here is the code I used for my swiper element: new Swiper("#swiper-pricing", { slidesPerView: 1.3, spaceBetween: 30, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 50 ...

Displaying an IP camera feed on a three.js canvas

I've been presented with a seemingly straightforward task in JavaScript that I'm not very familiar with. The challenge is to take an IP camera stream and display it on a three.js canvas. To start, I came across an example that uses a webcam inst ...

Guide on utilizing isElementPresent/isPresent within ng-repeat with Protractor

HTML Code: <div ng-repeat="todo in todos"> <span><input ng-model="todo.title" /></span> <span><input ng-model="todo.time" /></span> <span><input ng-model="todo.name" /></span ...

Issue with displaying the second dropdown based on the selection made in the previous dropdown

I wanted to address a recurring issue that has been discussed in various posts, such as this one on Stack Overflow: Show a second dropdown based on previous dropdown selection Despite attempting numerous solutions suggested in those posts, I have not been ...

Querying data in Laravel from a table with two foreign keys referencing the same table

I am facing an issue with mapping relations in Laravel Eloquent for two tables: teams and games. The teams table has id, group_id, and name fields, while the games table includes id, home_team_id, away_team_id, date, and score. The problem arises from the ...

Sending Multiple Sets of Data with Jquery Ajax.Post: A Step-by-Step Guide

I am currently working with asp.net mvc and I have a requirement to send two sets of database information from jQuery to my Mvc view. Here is an example of how my view looks like: public ActionResult MyView(Product one, Product two) { } Now, my question ...

Verify that the text entered in the form is accurate, and if it meets the required criteria, proceed to the next

Is it possible to achieve this without using JavaScript? If not, I'd like to find the simplest solution. I have a form that functions similar to a password entry field, and I would like to redirect users to a certain page if they type in a specific p ...

There was a 401 HTTP error encountered when trying to make a basic auth GET request from Axios

Currently, I am developing an API utilizing Flask (with flask-restful extension) and a frontend application using Vue.js. Both applications are running on localhost at the moment. flask: 127.0.0.1:5000, vue: localhost:8080/ To make requests to the API, I ...

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

Looking for assistance in setting up a personalized slideshow to automatically play on its

Recently, I have taken responsibility for a project that was initiated by someone else. The website contains a customized slideshow on its homepage. To meet the client's requirements, I have already made some alterations to the appearance and feel of ...

Utilizing Ajax in conjunction with Ruby on Rails

I have a question that may be quite basic (I am new to Rails 3). I am looking to implement Ajax functionality where once a user clicks on a link, it triggers a $.post call and initiates some server-side changes. Within the _share partial file, I currently ...

Obtain a collection of strings from an array of objects based on specified criteria

What is the most efficient method to extract an array of specific strings from an array of objects, where a certain condition needs to be met? Solution Attempt: const array = [{ "Item": "A", "Quantity": 2 ...

Is it possible for JavaScript within an <iframe> to access the parent DOM when

Is it possible for javascript in an iframe from a different domain to modify the parent's DOM? I need my iframed script to add new html elements to the parent page - any suggestions? Edit: One potential solution is using "Fragment ID Messaging" to co ...

Table cell smaller than div

I want to maintain the size of a table cell while having a larger div float over it. Is there a way to manipulate CSS and elements to achieve this without resizing the table cell? ...

Place the script tags within the div element

After loading a page dynamically, I found that only the contents of the div id="example" were being executed. However, the script tag inside the div was not being executed. I attempted to use eval to solve this issue, but it was unsuccessful. <div id=" ...