尝试在 Vue 中观看对象时遇到两个错误

Question

我目前正在 Vue 3 中创建一个应用程序来跟踪体育博彩表现。我有这个组件，它是输入投注单的各个部分的表单的一部分。每个子组件都会更新父组件中的一个

details

对象。值更新没问题。但我尝试观察

details

对象的更改，以便我可以验证信息并更新适当的标志，我遇到以下两个错误，都在父组件中：

键“undefined”指定的监视处理程序无效

无效的观看选项：“deep”true

ParentComponent.vue

<template>
  <SelectComponent
    name="sports"
    id="sport-select"
    :options="marketOptions"
    :class="isValidMarket ? 'valid' : 'invalid'"
    @update="updateValue(details, 'sport', $event)"
  />
  <InputText
    type="text"
    for="subject"
    placeholder="Team / Player / Game"
    :class="isValidSubject ? 'valid' : 'invalid'"
    @update="updateValue(details, 'subject', $event)"
  />
</template>
<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      details: {
        sport: {
          type: String,
          default: '',
        },
        subject: {
          type: String,
          default: '',
        },
      },
      isValidMarket: false,
      isValidSubject: false,
    }
  },
watch: {
    details: {
      validate(val) {
        console.log(val)
        console.log('something changed!')
      },
    },
    deep: true,
  },

我还在

watch

属性上尝试了不同的方法。

watch: {
    'details.sport': {
      validate: function (val) {
        if (val === '' || val === '--Select a Market--') {
          this.isValidMarket = false
        } else {
          this.isValidMarket = true
        }
      },
    },
}

这两者都会产生前面提到的错误，并且现在验证未正确进行。

我还构建了

details

对象，如下所示：

details: {
  sport: '',
  subject: ''
},

Answer 1

必须调用 watcher 函数

handler

，并且

deep

属性应紧接在处理函数之后放置

https://vuejs.org/guide/essentials/watchers#deep-watchers

watch: {
  details: {
    handler(val) {
      console.log(val)
      console.log('something changed!')
    },
    deep: true
  }
},