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)" 。 但过滤器数据未在 function 调用内更新...

Answer 1

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

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

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