Update the data storage and routing help

eliashdezr

I have this code:

<template>
  <div>
    <div class="layout-padding">
      <div class="group" v-if="dummyDataExists">
         Hey, it exists!
      </div>      
    </div>
  </div>
</template>
<script>
  import VueRouter from 'vue-router'
  import { LocalStorage } from 'quasar'
  
  let _dummyDataExists = false

  setTimeout(() => {
    // this returns true
    _dummyDataExists = LocalStorage.get.item('dummyData').length > 0
  }, 500)

  export default {
    data() {
      return {
        dummyDataExists: _dummyDataExists
      }
    },
    methods: {
      changePage() {
        let router = new VueRouter();
        router.push('test/other-page')
      }
    }
  }

</script>

My issues are:

dummyDataExists from the data object is not being updated since I’m using a small delay when assigning that variable, that also applies when I fetch some value using axios from an API service. If I manually set it to true the v-if works. Then I read about the change detection on Vue and I found this https://vuejs.org/v2/guide/reactivity.html where it states that unless I set manually the property via the ViewModel instance, I’ll not be able to dynamically update this value so v-if will never update. How I can instance the VM on these.vue components? or is there a better approach to make this work?
Second issue is that, I have some pages that receive a router param, and also I’m not able to the get the $route object which I see in some vue documentation should be $route.params but I’m not able to find the $routeobject anywhere.
Routing related too, is there a way to avoid doing this let router = new VueRouter(); every time I want to change the route?

rstoenescu

Hi,

If you want to use a router this is not the way to go. Do a quasar init <project_folder> and take a look at /src folder, mainly for router.js and main.js. The idea is to register only one router per app. Then you have $router usable within your Vue components.
So, instead of:

changePage() {
      let router = new VueRouter();
      router.push('test/other-page')
    }

You can write:

 changePage () {
     this.$router.push('/test/other-page')
 }

In order to be able to lazy attribute values to VM data props you need to understand: JS references & the Vue lifecycle diagram (https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)

Assigning boolean to boolean is not done by reference. Objects are passed by reference, arrays are passed by reference, but not numbers, booleans… Your code simply assigns a value to dummyDataExists, not a reference, so any further update to _dummyDataExists will not influence VM’s dummyDataExists.

If you want to lazy update the value of some VM prop, use the lifecycle methods (created(), mounted(), etc). That’s one option. Another would be to learn how to do that using Vue Router functionality: https://router.vuejs.org/en/advanced/data-fetching.html

Cheers,
Razvan

eliashdezr

Thanks for the responses man!

Two more questions:

haven’t figure out yet how to add beforeEach from the router on quasar, have any example?
Outside from the export default is there a way to access the $router object?

rstoenescu

@eliashdezr

In router.js:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

export default router

Not sure I understand the beginning of your question. You don’t have to import router wherever you are using it. It’s injected into VM’s through $router object – so you can use it in Vue <template> and <script> tags.

No More Posting New Topics!

Update the data storage and routing help