La copia profunda de un objeto JavaScript no funciona cuando se encapsula dentro de una propiedad computarizada de VUEJS -- javascript campo con vue.js campo con object campo con deep-copy camp Relacionados El problema

Deep Copying of a JavaScript Object not working when encapsulated within a VueJS computed property


-2
vote

problema

Español

Tengo un objeto JavaScript en una instancia de VUE que se está copiando en otro objeto JavaScript a través de una propiedad computarizada. Sin embargo, por alguna razón, la baja copia el objeto en cuestión en lugar de una copia profunda, aunque se está utilizando "proxy": "https://localhost:5001", "eslintConfig": { "extends": "react-app" }, 3 :

    "proxy": "https://localhost:5001",   "eslintConfig": {     "extends": "react-app"   }, 4  

Estoy intentando copiar profundamente el valor de "proxy": "https://localhost:5001", "eslintConfig": { "extends": "react-app" }, 5 utilizando el siguiente bucle dentro de una propiedad comprobable:

    "proxy": "https://localhost:5001",   "eslintConfig": {     "extends": "react-app"   }, 6  

Sin embargo, el objeto "proxy": "https://localhost:5001", "eslintConfig": { "extends": "react-app" }, 7 está reteniendo una copia poco profunda del objeto "proxy": "https://localhost:5001", "eslintConfig": { "extends": "react-app" }, 8 , cuando espero que haga una copia profunda de ella. ¿Por qué no está creando una copia profunda del objeto, aunque estoy usando "proxy": "https://localhost:5001", "eslintConfig": { "extends": "react-app" }, 9 ?

Demostración del problema: https://codepen.io/deftonez4me/pen/qbapygp

Original en ingles

I have a JavaScript object in a Vue instance that is being deep copied into another JavaScript object via a computed property. However for some reason it shallow copies the object in question instead of a deep copy, even though JSON.parse(JSON.stringify()) is being used:

<div id="app">   <v-app id="inspire">     <v-row>       <v-col cols="6">         <v-text-field            v-model="formDialog.inputs.definition.val"            placeholder="Definition from FormDialog"></v-text-field>         </v-col>         <v-col cols="6">         <v-text-field            v-model="initFields.definition"            placeholder="Definition from Init Fields"></v-text-field>       </v-col>     </v-row>          <v-row>       <v-col cols="6">         <v-text-field            v-model="formDialog.inputs.synonym.val"            placeholder="Synonym from FormDialog"></v-text-field>       </v-col>         <v-col cols="6">         <v-text-field            v-model="initFields.synonym"            placeholder="Synonym from Init Fields"></v-text-field>       </v-col>     </v-row>       </v-app> </div> 

I am attempting to deep copy the value of formDialog.inputs using the following loop within a compupted property:

new Vue({   el: '#app',   vuetify: new Vuetify(),   data () {     return {       formDialog: {                     inputs: {                         definition: {                             val: '', save: true, add: true,                             icon: 'mdi-file-word',                             placeholder: 'Word Definition'                         },                          synonym: {                             val: '', save: true, add: true,                             placeholder: 'Synonyms'                         }                     }                 }     }   },   computed: {     initFields: function() {       let obj = {};       if(typeof this.formDialog.inputs != 'undefined') {         for(let key of Object.keys(this.formDialog.inputs)) {           if(typeof this.formDialog.inputs[key].val != 'undefined') {             //obj[key] = JSON.parse(JSON.stringify(this.formDialog.inputs[key]));             obj[key] = this.formDialog.inputs[key].val;           }         }       }        return JSON.parse(JSON.stringify(obj));       //return obj;     }     } }) 

However the obj object is retaining a shallow copy of the this.formDialog.inputs object, when I expect it to make a deep copy of it. Why is it not creating a deep copy of the object even though I am using JSON.parse(JSON.stringify(obj))?

Demonstration of issue: https://codepen.io/deftonez4me/pen/qBapYgP

           
     
     

Lista de respuestas

0
 
vote

Aquí hay una versión algo abreviada de su código, que, creo que servirá nuestro propósito:

  const formDialog = {     inputs: {         id: {             val: '',             save: true,         },          word_data: [],          definition: {             val: '',                 save: true, add: true,                 icon: 'mdi-file-word',                 placeholder: 'Word Definition'         },          synonym: {             val: '', save: true, add: true,                 placeholder: 'Synonyms'         }     } }  let obj = {}; for(let key of Object.keys(formDialog.inputs)) {     if(typeof formDialog.inputs[key].val !== 'undefined') {         //why is this line making a shallow copy and not a deep copy?         obj[key] = JSON.parse(JSON.stringify(formDialog.inputs[key]));     } }  obj.id.val = 'zunit';  console.log(obj);  console.log(formDialog)  

Observe que he realizado una corrección a su bucle eliminando el val antes de alimentarlo en JSON.stringify . Usted menciona que

Los elementos en el objeto OBJ aún están reteniendo la referencia a los elementos de esta.FormDialog.Inputs. Cuando modifico esto.formdialog.inputs también modifica los elementos obj

Pero me temo que no es cierto, ya que verá cambiando obj.id.val del objeto clonado, el objeto original no se ve afectado.

Fuera de ese ajuste, su código funciona bien. Tal vez su entorno específico crea el problema, ya que parece estar haciendo esto dentro de una clase.

 

Here is a somewhat abridged version of your code, which, I believe will serve our purpose:

const formDialog = {     inputs: {         id: {             val: '',             save: true,         },          word_data: [],          definition: {             val: '',                 save: true, add: true,                 icon: 'mdi-file-word',                 placeholder: 'Word Definition'         },          synonym: {             val: '', save: true, add: true,                 placeholder: 'Synonyms'         }     } }  let obj = {}; for(let key of Object.keys(formDialog.inputs)) {     if(typeof formDialog.inputs[key].val !== 'undefined') {         //why is this line making a shallow copy and not a deep copy?         obj[key] = JSON.parse(JSON.stringify(formDialog.inputs[key]));     } }  obj.id.val = 'zunit';  console.log(obj);  console.log(formDialog)

Notice that I have made a correction to your loop by knocking off the val before feeding it into JSON.stringify. You mention that

The elements in the obj object are still retaining the reference to the elements of this.formDialog.inputs. When I modify this.formDialog.inputs it also modifies the obj elements

But I'm afraid that's not true as you will see by changing obj.id.val of the cloned object, the original object is unaffected.

So outside of that tweak, your code works fine. Perhaps your specific environment creates the issue as you do appear to be doing this inside a class.

 
 
   
   
-1
 
vote

Debes probar esto:

      if (this.formDialog.hasOwnProperty('inputs')) {         obj[key] = JSON.parse(JSON.stringify(this.formDialog.inputs));     }   
 

You should try this:

    if (this.formDialog.hasOwnProperty('inputs')) {         obj[key] = JSON.parse(JSON.stringify(this.formDialog.inputs));     } 
 
 

Relacionados problema

0  El mejor escenario / situación para usar la copia profunda de Java  ( Best scenario situation to use java deep copy ) 
¿Puedo saber cuándo es el mejor escenario para usar el método de copia profunda Java? Quiero entender cuando debemos usar la copia profunda y cuando no debe...

8  C Programación. ¿Cómo copiar profundamente una estructura?  ( C programming how to deep copy a struct ) 
Tengo las siguientes dos estructuras donde "Child Struct" tiene una "estructura de rusas" como elemento. Luego creo dos estructuras de tipo "NIÑO" Llamamos ...

6  Ruby => traducción de javascript  ( Ruby javascript translation ) 
curioso ... ¿Cómo escribirías este rubí en JS? Array.new(3, Array.new(3, 0)) que devuelve [[0, 0, 0], [0, 0, 0], [0, 0, 0]] He intentado una var...

0  ¿Copia profunda de los objetos que utilizan el sistema?  ( Deep copy of objects using system reflection ) 
¿Cómo hacer una copia profunda de los objetos usando el sistema.Reflación en C #? ...

120  Copia profunda de un Nsarray  ( Deep copying an nsarray ) 
¿Hay alguna función incorporada que me permita copiar una copia profunda un NSMutableArray ? Miré a su alrededor, algunas personas dicen [aMutableArray co...

5  Java devuelve la copia para ocultar cambios futuros  ( Java return copy to hide future changes ) 
En Java, digamos que tiene una clase que envuelve un avg_length = {x:float(STRlen[x])/count[x] for x in STRlen} ^...

7  Copia profunda de un objeto C #  ( Deep copy of a c sharp object ) 
Estoy trabajando en algún código que está escrito en C #. En esta aplicación, tengo una colección personalizada definida de la siguiente manera: {"Name":{"...

7  ¿Cómo realizar una copia profunda de la estructura con CUDA? [duplicar]  ( How to perform deep copying of struct with cuda ) 
Esta pregunta ya tiene respuestas aquí : Copia de una estructura que contiene punteros al dispositiv...

1  Copia RENDERTEXTETETE a la imagen  ( Copy rendertexture to image ) 
Estoy tratando de copiar sf::RenderTexture (con sf::Image6 & AMP; ON), en OPENCV Mat Object. Podemos convertir un sf::Image a cv::Mat (OPENCV) por ...

217  ¿Cuál es la diferencia entre la copia superficial, la opcia y la operación de asignación normal?  ( What is the difference between shallow copy deepcopy and normal assignment oper ) 
Dim storyRange As Object 'Word.Range For Each storyRange In oDoc.StoryRanges Do With storyRange.Find .Text = "#OVERALLPAGENUMBER#" ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos