Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

116
Visualizações
Vue watch deep object and get the changed key

Is there a way in Vue to watch a deeply nested object and get the changed keys, not the values?

Here's a problem I've stumbled upon: I have a table consisting of thousands of objects. User can click on an object, open a modal based on this object and onSubmit it will send an API call with the object user've edited and thus rewrite the existing object in DB with it (you can't change a particular field with this API, you need to rewrite the entire object with a new one based on its previous version). It is very simple when dealing with single object editing, yet good days don't last and now I need to implement a batch editing - you pick the necessary objects, open a single form, make changes and onSubmit you rewrite not a single one but all these objects in DB with edited fields. The problem here is that objects may have different values and I need to preserve them by changing only the ones edited in the modal.

What I do now is I loop through the one of the original objects and the object in the modal, comparing their fields and collecting keys of fields that are not equal. Since the objects are very deeply nested you may imagine the ifs and }}} stairs I'm having. Anyway I get the changed fields this way and in my API calls I send objects with their not changed fields preserved and new fields updated though it looks too verbose. I'm using Vue in my project and this is why the idea of a watcher came to my mind, yet I cannot find the implementation that meets my need.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

It's possible to specify deep: true, in your watcher

watch: {
  myObject: { // or 'myObject.someNestedObject.someNestedValue' as key ( with quotes )
    deep: true,
    // immediate: true, // run watcher on mounted()
    handler: (newVal, oldVal) => {
      console.log({newVal, oldVal});
    },
  },
},
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda