vue-sync icon indicating copy to clipboard operation
vue-sync copied to clipboard

Watching Object & String at the same time

Open TerryCaliendo-WealthCounsel opened this issue 2 years ago • 0 comments

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,
    },
}