I am currently creating an app in Vue 3 to track sports betting performances. I've got this component that's part of a form to input an individual leg of a bet slip. Each child component updates a details
Object in the parent. The values update no problem. But I try to watch the details
Object for changes so I can validate the information and update the appropriate flags I run into the following two errors, both at the Parent Component:
Invalid watch handler specified by key "undefined"
Invalid watch option: "deep" true
<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,
},
I've also tried a different approach on the watch
property.
watch: {
'details.sport': {
validate: function (val) {
if (val === '' || val === '--Select a Market--') {
this.isValidMarket = false
} else {
this.isValidMarket = true
}
},
},
}
Both of these produce the errors mentioned before and now validation isn't occurring correctly.
I've also structured the details
Object as the following:
details: {
sport: '',
subject: ''
},
The watcher function must be called handler
, and the deep
property should be placed immediately after the handler function
https://vuejs.org/guide/essentials/watchers#deep-watchers (make sure to toggle from Composition to Options API in the top-left)
watch: {
details: {
handler(val) {
console.log(val)
console.log('something changed!')
},
deep: true
}
},