CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
user12140833
user12140833

Reputation: 179

unwatch any watcher when another watcher is running

watch: {
options: {
      handler () {
        this.get_re_list() 
            .then(data => {
                this.re = data.result
                this.totalM = data.count
            })
      },
      deep: true,
    },
'$route.params.homeCode':  {
  handler () {
    return new Promise((resolve, reject) => {
          reApi.getRe({page:'', count:'', home:this.$route.params.homeCode}) 
            .then(re => {
                this.re = re.result
                this.totalRe = re.count
            })
            .catch(error => {
                return reject(error)
            })
      })
  },
  deep: true,
  immediate: true
}
},

I have route path as path: '/:homeCode?', homeCode is optional so I have kept ? at the end. Problem: When I pass the homeCode the '$route.params.homeCode' is called but immediately the next route i.e options is executed. How do I stop executing options watchers when '$route.params.homeCode' is running?

Edit1:

I have options for external pagination: 

options: {
          page: 1,
          itemsPerPage: 40,
        },

Upvotes: 0

Views: 669

Answers (1)

Michael
Michael

Reputation: 5038

Do you need options in a watcher, can it not be run on mount or created? In addition the watch function does return an unwatch although then you would need to setup the watcher again. see here:
https://v2.vuejs.org/v2/api/#vm-watch.
A possibly simpler solution would be to just set a variable to true inside your . route watch and check it in the options watch.
Like so:

watch: {
options: {
      handler () {
        if (this.routeCalled) return
        this.get_re_list() 
            .then(data => {
                this.re = data.result
                this.totalM = data.count
            })
      },
      deep: true,
    },
'$route.params.homeCode':  {
  handler () {
    this.routeCalled = true
    return new Promise((resolve, reject) => {
          reApi.getRe({page:'', count:'', home:this.$route.params.homeCode}) 
            .then(re => {
                this.re = re.result
                this.totalRe = re.count
            })
            .catch(error => {
                return reject(error)
            })
      })
  },
  deep: true,
  immediate: true
}
},

Upvotes: 1

Related Questions