Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a value in Vue.js non-reactive?

In my Vue.js app, I have an array value that should only be updated when a user completes a specific "refresh" action. However, as soon as I assign a new value to that array value, the array value becomes reactive and changes instantly as the data in the assigned value changes. The array value should remain un-reactive.

For example, I have a method, refresh(), which when triggered is meant to update displayedData, which should not be reactive, with currentData, which should be reactive. displayedData should only update when refresh is called.

methods: {
    refresh: function() {
        this.displayedData = this.currentData;
    }
}
like image 905
Cole Avatar asked Dec 07 '18 02:12

Cole


Video Answer


3 Answers

To make a value not reactive without making it static, you can make a "copy" of it by using JSON to encode and then decode it.

this.displayedData = JSON.parse(JSON.stringify(this.currentData));

This assigns the current state of one value to another value, and no changes to the first value will change the second value until this code is triggered again.

like image 166
Cole Avatar answered Oct 03 '22 05:10

Cole


If you DON'T add the currentData to the data() method then it will not be reactive.

export default {
    currentData: [],
    data() {
        return {

        }
    },
    methods: {
        refresh: function() {
            this.displayedData = this.currentData;
        }
    }
}

You can then still reference currentData in the section using {{ $options.currentData }}

like image 40
Borjante Avatar answered Oct 03 '22 04:10

Borjante


An approach (WITHOUT disabling reactivity) is to use a different array for your temporary data and move stuff over in to the good array when the user presses refresh.

You could copy the values in the first array into the temp array like this.temp = this.permanent.slice() in the created or mounted life-cycle function.

Slice would make a shallow copy of the array. If you need to also clone the items in the array, then maybe use some deep copy library or the JSON.parse(JSON.stringify(...)) method.

like image 26
Sebastian Sipos Avatar answered Oct 03 '22 05:10

Sebastian Sipos