[Vuejs]-Watch function is not firing after variable being passed through params

by

0👍

✅

It was a route naming error on my part, but I had the route named wrong. I had named a primary route and not the component route.

0👍

Note that watch is lazy, that is it will only fire when it detects a change and wont fire immediately with the initial value.

If you want the watch listener to fire immediately AND for all subsequent changes to the watched property then you should use watchEffect.

watchEffect(() => {
  if (route.params.mus != undefined) {
    //do things
  }
})

Here, the callback will run immediately. During its execution, it will also automatically track route.params.mus as a dependency (similar to computed properties). Whenever route.params.mus changes, the callback will be run again.

watch vs watchEffect

0👍

Have you tried adding { deep: true } like this:

watch(
     () => route.params.mus,
     () => {
       if (route.params.mus != undefined) {
      
        //do things
     },
   { deep: true }
 })

Leave a comment