VueJS Beobachter stoppen, eine temporäre Variable beobachten

Question

Ich habe ein Problem mit VueJS- und Observer-Objekten. Ich weise einen Teil meines Objekts einer temporären Variablen zu, um sie später zu verwenden. Dann den ursprünglichen Teil meines Objekts mit neuen Daten neu zuweisen und nach 8 Sekunden zurück in den ursprünglichen Zustand, den ich in meiner temporären Variable gespeichert habe.

Ich habe dieses Objekt mit einer Listenansicht verknüpft, die diese 2 verschiedenen Zustände unterschiedlich darstellt.

Ich möchte den Beobachter davon abhalten, meine temporäre Variable zu beobachten, aber ich kann nicht herausfinden, wie.

Unten ist der Code, den ich derzeit haben:

var temporary = core_data.map_data[data.selected]; //This is the variable I dont want to be observed. 

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); 

Answer 1

Wenn Sie Reaktivität in vuejs data(){} Objekt nicht möchten, können Sie von ‚Klon‘ sortieren und eine Kopie des Objekts machen mit JSON parse/stringify Methoden. ex:

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

Sie jetzt copy ändern können, und es wird nicht die Originaldaten Eigenschaft aktualisieren.

Nachdem Sie mit der Änderung fertig sind, können Sie die this.original noch so einfach aktualisieren, indem Sie ihr den Wert Ihres Kopierobjekts zuweisen.

jsfiddle - demo

Answer 2

Verwenden lodash.js JavaScript-Bibliothek, cloneDeep Methode, weil JSON.parse (JSON.stringify()) wird nicht für einige umfangreiche Listen oder Daten arbeiten, und es ist nicht wirksam

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

Beispiel

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

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