Vue3 在使用 v-model:prop="data" 时不会触发 watch

Question

我正在为我的过滤器创建一个子组件，它应该在用户更改某些输入值时更新...问题是当我将新数据发送到父组件时，手表不会触发！请检查我的代码，看看我哪里出错了...

父组件

定义组件

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

定义监视表达式

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

子组件

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 });
}

注意：console.log 打印 newValue 和 属性 正确，但手表永远不会发生！

PS：我也在父组件内部使用了v-on:update:filters="getAccounts(filters)"。但是过滤器数据没有在函数调用中更新...

Answer 1

您需要在观察数组或对象时将 deep 设置为 true，以便 Vue 知道它应该观察嵌套数据的变化。试试这个：

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

作为参考，请查看 vue 3 文档： https://v3.vuejs.org/guide/migration/watch.html#_3-x-syntax