6

Tengo una pagina simple hecha en vue, donde en el data hay un objeto de la siguiente forma:

data: function () {
  return {
    titulo: '',
    elementos: Object
  }
}

Ahora, elementos esta definido como un objeto, pero sin embargo, cuando hago algun cambio sobre alguna de sus propiedades:

elementos.propiedad1 = 4;

No ocurre nada, mi vista no reacciona a los cambios.

No entiendo porque pasa esto, ni porque no es reactivo, si el elemento esta definido en el data. Que puede estar pasando?

0

1 respuesta 1

6

TL;DR;

Los objetos no son reactivos en vue per se, necesitas avisarle a vue que un objeto cambio para que sea reactivo. Hay que setear el objeto usando set o Object.assign

Problemas en la deteccion de cambios

Las propiedades de los objetos no se comportan como uno espera. Los cambios en las mismas no provocan que vue reaccione a los cambios como uno espera.

Cuando uno cambia un objeto:

miobjeto.prop1 = nuevovalor

Uno esperaria que si eso se muestra en la vista

<div>
    {{miobjeto.prop1}}
</div>

la misma cambie. Pero ello no ocurre.

Esto se debe, a que las propiedades del objeto en si no son reactivas, porque al inicializar el mismo, vue creo un wacth para detectar cambios en el objeto, no en las propiedades del mismo.

Por lo tanto, cambiar propiedades no surge el efecto esperado, a menos que se usen los metodos recomendades por vue para que los mismos sean detectados.

Estos metodos se pueden usar tanto para cambiar los valores del objeto, como para tambien agregar nuevas propiedas.

  1. Cambiar el objeto totalmente

Se puede hacer que el objeto reaccione, si se hace un nuevo objeto y se lo asigna al viejo:

 miobjeto = minuevoobjeto;
  1. Usar set

Se puede usar el metodo Vue.Set para agregar propiedades al mismo

Vue.set(vm.miobjeto, 'nuevaprop', nuevovalor);

Tambien se puede usar this.$set que es un alias global para el metodo anterior.

  1. Usar Object.assign

Si se desea modificar una o mas propiedades, se puede usar este metodo para que se encargue de comparar los objetos y devolver uno nuevo con las propiedades cambiadas.

 this.miobjeto = Object.assign({}, this.miobjeto, { prop1: 1, prop2: 2 })

Usando alguno de los metodos descriptos arriba, provoca que el objeto sea tomado por los watch de vue, y reaccione como corresponde en todos los casos.

1
  • ¿Y si la marcas como aceptada :D ?
    – fredyfx
    Commented el 30 ene. 2019 a las 2:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.