vue-sync
vue-sync copied to clipboard
Watching Object & String at the same time
I'm trying to store the state of a search query on Vuetify's V-Data-Table along with some user typed filter text. The code is similar to below. Any initial thoughts as to why adding the "options" to the "url" causes "filterText" to be undefined?
data() {
return {
filterText: '',
options: { sortBy: ['sortName'], mustSort: true },
}
}
url: {
// Including the "options" line below causes filterText to be undefined in the Watcher below
// Removing the "options" line below, filterText is an empty string (as defined in the data section above) in the watcher below
options: 'options',
filterText: 'filterText',
}
watch: {
options: {
handler() {
// Vuetify's data table modifies the 'options' object and this handler always gets fired
// If "options" is specified in the "url" option above, "this.filterText" is UNDEFINED at this point.
// It should be an empty string as defined in the data section
this.getContacts()
}
},
deep: true,
},
}