Question

0

336

Views

Vue3 won't trigger watch when using v-model:prop="data"

I'm creating a child component for my filters which should be updated when the user changes some input values... The problem is that when I emit the new data into the parent component the watch won't trigger! Please review my code to see where I went wrong...

Parent Component

Defining the component

<FiltersComponent v-model:filters="filters" />

Defining the watch expression

watch(filters, (value) => {
  getAccounts(value);
});

Child Component

const emits = defineEmits(['update:filters']);
const props = defineProps({
  filters: {
    type: Object,
    default: () => ({
      ...
    }),
    required: true,
  },
});

function updateFilters(newValue, property) {
  console.log('updateFilters', newValue, property);
  emits('update:filters', { ...props.filters, [property]: newValue });
}

note: the console.log prints the newValue and property correctly but the watch never happens!

PS: I used the v-on:update:filters="getAccounts(filters)" inside parent component too. but the filters data is not updated inside function call...

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T07:36:22.615Z

You need to set deep to true when watching an array or object so that Vue knows that it should watch the nested data for changes. Try using this:

    watch(filters, (value) => {
      getAccounts(value);
    },
      {
       deep: true
      }
    );

For reference please review the vue 3 documentation: https://v3.vuejs.org/guide/migration/watch.html#_3-x-syntax

0

336