[Vuejs]-Vue.js 3 – watching props in child component does not work if props comes with a member of array in parent component

by

0👍

✅

Of course the watch in child component is not triggered by pushing or deleting elements from the array. Child component is not watching whole array but just single element (it’s val property).

If you push new element into the array, child component for that element does not exist yet. If you delete an element, the child component rendered for that element is destroyed immediately. Only thing that can trigger that watch is indeed mutation of the val property…

Problem with test2 is that testNum is local temporary variable – instead of v-model="testNum", use v-model="test2[index]"

Anyway your ChildComponent.vue does not need watch at all. Just use computed:

const resultString = computed(() => props.modelValue % 2 === 0 ? 'even' : 'odd')

…and btw you should be using key with v-for – docs

Leave a comment