0

I have a problem in my ns-vue app with watching. I have the app which is based on this drawer navigation template https://plugins.nativescript.rocks/plugin/@nativescript/template-drawer-navigation-vue. I want use geolocation for whole app, so I placed this module to DrawerContent.vue. In this file, I am passing props to other modules:

onNavigationItemTap(component) {
  this.$navigateTo(component, {
    clearHistory: true,
    props:{
      latitude: this.latitude,
      longitude: this.longitude,
    }
   });
   utils.closeDrawer();
}

latitude and longitude are updated regularly.

and on Home.vue I have:

props:['latitude','longitude'],
...
....
watch:{
   latitude:()=>{
      console.log('LAT change detected')
      }
}

but this is not working. I tried lot of options from the whole web, for example:

watch: {
   $props: {
      handler() {
        this.parseData();
      },
      deep: true,
      immediate: true,
  }
}

or

watch:{
   '$props':()=>{
      ......
     }
}

but still not working.

Please help, thanks

2 Answers 2

0

vue props are not reactive https://v2.vuejs.org/v2/guide/reactivity.html but you can pass an object as a property containing latitude and longitude:

data () {
    return {
      location: {
          latitude: ...,
          longitude: ...,
      }
    };
},
...
this.$set(this.location, 'latitude', latitude);
...
onNavigationItemTap(component) {
  this.$navigateTo(component, {
    clearHistory: true,
    props:{
      location: this.location
    }
   });
   utils.closeDrawer();
}

and the watcher:

props:['location'],
...
watch:{
   'location.latitude' () {
      console.log('LAT change detected')
      }
}
3
  • OK, I`ll try it. Thanks
    – exem
    Mar 9, 2021 at 21:46
  • ... not working. I think that TomG is right - props passed throught $navigateTo() are not reactive because of they are passed only once ( when $navigateTo is called).
    – exem
    Mar 10, 2021 at 6:43
  • there are probably an error on your code - the props should be props:['location'] not props:['latitude','longitude']
    – exem
    Mar 10, 2021 at 6:48
0

Props passed through Nativescript navigation might not be reactive, anyway I wouldn't let the drawer component handle this feature.

If you're using Vuex, you could move these properties (or the whole logic) to the store and fetch them in your component through computed properties. You could also set up a mixin if your code can be reused.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.