Quiero ver los cambios de la variable de familias que contiene objetos anidados.
<component-test v-for="family of familiesToDisplay" // rest /> data: () => ({ families: [], }), computed: { familiesToDisplay() { return this.families.fillter(family => family.members > 4); }, },En alguna respuesta he visto algunas recomendando el uso de watch pero en mi caso no sabía cómo implementarlo ya que nunca antes lo había usado. por lo tanto, la solicitud es para obtener cambios de objetos anidados en familias (como objetos, tengo persona y trabajo, por lo que si se ha cambiado el nombre de una persona o se ha cambiado su trabajo, los cambios deben recuperarse aquí)
Este código debería funcionar bien, sin embargo, es necesario para mutar correctamente los objetos dentro de una matriz. Debe usar this.$set o reemplazar el objeto con uno nuevo para activar vue que vuelve a representar una lista y vuelve a calcular una lista. Por ejemplo, puede cambiarlos así (puede encontrar un ejemplo de trabajo completo aquí ):
export default { name: "HelloWorld", components: { Display, }, data: () => ({ families: [ { name: "foo-1", members: 1 }, { name: "foo-5", members: 5 }, { name: "bar-6", members: 6 }, { name: "bar-3", members: 3 }, ], }), methods: { onClick() { this.families.forEach((family) => { this.$set(family, "members", this.getRandomNumber()); }); }, getRandomNumber() { return Math.floor(Math.random() * 10) + 1; }, }, };