[Solved]Impossible set global variable on quasar 0.15



  • Good evening,
    i want set my global variables on quasar 0.15 but i cant do it.
    This is my situation: i created a plugin the manages the global variables

    export default ({ Vue }) => {
      Vue.prototype.$FlagCardsHeader = false
    }
    

    i included it on “quasar.conf.js”. I can read, in my components, the variable this.$FlagCardsHeader without problem but i cant set it. If i do

    this.$FlagCardsHeader=true
    

    its value is false not true.

    Any suggestions?

    Thanks in advance



  • quick workaround:

    export default ({ Vue }) => {
      Vue.prototype.$optionsObject = {
          FlagCardsHeader: false
      }
    }
    


  • Thanks =),
    but i can’t set

    this.$optionsObject.FlagCardsHeader = true
    

    i don’t know why is not working, the value is always false.



  • Oh my… weird. how are you checking if it is set? it probably is not reactive

    Anyways proper way to do this is to use vuex



  • I just put it on my component’s layout:

    {{$optionsObjectFlagCardsHeader}}
    

    this is the toggle the active the method:

    <q-toggle
          v-model="$optionsObject.FlagCardsHeader"
          @click="ChangeHeaderCardsStatus()"
    />
    

    and this is the function:

    ChangeHeaderCardsStatus () {
          this.$optionsObject.FlagCardsHeader = true
        }
    

    anyway i’m gonna to check out vuex, but i think is too much for 4 global variables ^^



  • I just discovered that the variable change but quasar doesn’t refresh it. In fact if i go to another component and back to the first one the variable’s value is true (i see the header active in my app also).

    So actually i dont have any idea how solve the problem.



  • The variable will be updated locally, only, as it will be scoped inside component. The Vue.prototype.* approach is good for global constants, not so much for global variables.

    For managing cross-component variables, you need either a global bus, web storage or – the very best solution – Vuex.



  • Thanks for you help leo,
    to see the correct variable’s value is enough change component. Is like quasar doesn’t refresh the variable in the current component. So I think is a refresh problem. With quasar 0.14.8 I used this.$root.variable and it worked perfectly.



  • Silly question, but are you sure that the function is being called? Have you tried substituting @click by @click.native?



  • Try console.log() instead of {{variable}}. Like I said, it probably is not reactive, meaning even if variable value changes, it will not be detected by Vue. Anyways this is a Vue issue and not a Quasar issue.



  • @leopiccionia said in Impossible set global variable on quasar 0.15:

    Silly question, but are you sure that the function is being called? Have you tried substituting @click by @click.native?

    Ok i tried with @click.native and finally i can execute the function (i can see the console.log()), with just @click the function is not execute. Anyway i think is the toggle object that change the this.$optionsObject.FlagCardsHeader value in fact its change also without the @click method (just clicking on the toggle).

    @benoitranque said in Impossible set global variable on quasar 0.15:

    Try console.log() instead of {{variable}}. Like I said, it probably is not reactive, meaning even if variable value changes, it will not be detected by Vue. Anyways this is a Vue issue and not a Quasar issue.

    It is like you say, vue not refresh the variable.

    Gonna to try a fresh installation and see if i will have the same result.



  • Ok, same problem with a fresh installation. Do you have the same problem? I will let my code so you can reproduce it:
    just change pages/index.vue code with

    <template>
      <q-page class="flex flex-center">
        <q-toggle
          v-model="$optionsObject.FlagCardsHeader"
          @click.native="ChangeHeaderCardsStatus($optionsObject.FlagCardsHeader)"
        />
      </q-page>
    </template>
    
    <script>
    import {
      QToggle
    } from 'quasar'
    
    export default {
      name: 'PageIndex',
      components: {
        QToggle
      },
      methods: {
        ChangeHeaderCardsStatus (asd) {
          console.log(asd)
        }
      }
    }
    </script>
    

    and this is a plug-in

    // import something here
    
    // leave the export, even if you don't use it
    export default ({ Vue }) => {
      Vue.prototype.$optionsObject = {
          FlagCardsHeader: false,
      }
    }
    


  • Thanks for your help guys! Solved with vuex.