I want to watch changes of families variable which contains nested objects
<component-test
v-for="family of familiesToDisplay"
// rest
/>
data: () => ({
families: [],
}),
computed: {
familiesToDisplay() {
return this.families.fillter(family => family.members > 4);
},
},
In some response I have seen some recomanding the use of watch but in my case I didn't knew how to implement it since I have never used before. so the request is to get changes of nested objects in families (as objects I have person and work so if a name of a person has been changed or its work has been changed changes must be retreived here)
This code should work fine, however, it is necessary to correctly mutate objects inside an array. You need to use this.$set or replace the object with a new one to trigger vue re-rendering a list and recalculation of a list.
For example, you can change them like this, (full working example you can find here):
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;
},
},
};