Cómo hacer objetos declarados en data() reactivos a nuevas propiedades en Vue.js / Nuxt

13/05/2023
|Por Yoné Rocha

Si deseas que un objeto declarado en la propiedad data() sea reactivo a sus nuevas propiedades, puedes utilizar el método $set. Por ejemplo:

Shell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Declarar el objeto en data sin valores
data() {
  return {
    isSubmenuOpen: {}
  }
},
 
// Utilizar $set para que el objeto sea reactivo con los valores creados
created() {
  const isSubmenuOpen = {
    prop1: value1,
    prop2: value2
  }
  this.$set(this, 'isSubmenuOpen', isSubmenuOpen)
}

Al utilizar $set, garantizas que el objeto isSubmenuOpen se actualice correctamente y se mantenga reactivo a las nuevas propiedades asignadas. Esto es especialmente útil cuando necesitas agregar propiedades dinámicamente a un objeto declarado en data().

Nuxt Vue.js