How to prevent VueJS observer from monitoring a temporary variable

Question

How to prevent VueJS observer from monitoring a temporary variable

My VueJS and Observer objects are causing me trouble. I am encountering an issue where I assign a part of my object to a temporary variable for later use, update the original part with new data, and then revert it back to its original state after 8 seconds.

The Object is linked to a list view that displays these two different states uniquely.

I am trying to find a way to prevent the observer from watching my temporary variable, but I'm having difficulty figuring it out.

Below is the code segment I am currently working with:

var temporary = core_data.map_data[data.selected]; //I want this variable to remain unobserved.

core_data.map_data[data.selected].colour = data.colour;
core_data.map_data[data.selected].message = data.message;
core_data.map_data[data.selected].type = "ping";
setTimeout(
    function () {
        core_data.map_data[data.selected] =temporary;

        // console.log(core_data.map_data);
    }, 8000);

javascript vue.js vuejs2 observers

Answer 1

Answer №1

For those looking to avoid reactivity in Vue.js within the data(){} object, a workaround is available by essentially creating a clone of the object using JSON's parse/stringify methods. Example:

 var clonedData = JSON.parse( JSON.stringify( this.original ) );

This allows you to make modifications to the clonedData without affecting the original data property.

Once the necessary modifications are complete, simply update the this.original value by assigning it the cloned object.

View demo on jsfiddle

Answer 2

For those looking to avoid reactivity in Vue.js within the data(){} object, a workaround is available by essentially creating a clone of the object using JSON's parse/stringify methods. Example:

 var clonedData = JSON.parse( JSON.stringify( this.original ) );

This allows you to make modifications to the clonedData without affecting the original data property.

Once the necessary modifications are complete, simply update the this.original value by assigning it the cloned object.

View demo on jsfiddle

Answer 3

Answer №2

For handling large lists or data in JavaScript, consider using the lodash.js library and its cloneDeep method instead of the less effective JSON.parse(JSON.stringify()) method.

https://lodash.com/docs/#cloneDeep

Here is an example:

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

Answer 4

For handling large lists or data in JavaScript, consider using the lodash.js library and its cloneDeep method instead of the less effective JSON.parse(JSON.stringify()) method.

https://lodash.com/docs/#cloneDeep

Here is an example:

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

How to prevent VueJS observer from monitoring a temporary variable

Answer №1

Answer №2

Similar questions

Transforming the initial character of a label element into uppercase

Converting a table into div elements and subsequently reverting it back to its original table format

Problem related to permissions within a node.js package

Retrieving additional parameters from an HTTP request

Javascript - Issue with Ajax causing additional commas in JSON responses

Exploring the world of jQuery AJAX alongside Google's currency calculator

The Benefits of Semantic Class Names compared to Microdata

Is there a way to activate the window load event within this Jest test scenario?

Guide on displaying JSON data from a server on a webpage using Google Charts in real-time

Tips for maintaining my Countdown timer even after a page refresh

Differences between Typescript Import and JavaScript import

Array of notifications in Vue framework

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

image source that changes dynamically with a placeholder image

What is the best way to utilize v-select for searching entries while also allowing users to type in text within the input field for the search?

Tap and conceal feature on a mobile website

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

Using Vue: Save user information in the Vuex store prior to registration

At what point is the args variable required by Dojo?

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?