No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [Solved]Impossible set global variable on quasar 0.15

    Help
    5
    15
    5821
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • benoitranque
      benoitranque last edited by benoitranque

      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

      1 Reply Last reply Reply Quote 0
      • C
        cklinx last edited by cklinx

        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 ^^

        1 Reply Last reply Reply Quote 0
        • C
          cklinx last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • L
            leopiccionia last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • C
              cklinx last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • L
                leopiccionia last edited by

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

                1 Reply Last reply Reply Quote 0
                • benoitranque
                  benoitranque last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • C
                    cklinx last edited by cklinx

                    @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.

                    1 Reply Last reply Reply Quote 0
                    • C
                      cklinx last edited by cklinx

                      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,
                        }
                      }
                      
                      1 Reply Last reply Reply Quote 0
                      • C
                        cklinx last edited by

                        Thanks for your help guys! Solved with vuex.

                        1 Reply Last reply Reply Quote 0
                        • R
                          rachitpant last edited by

                          This is BS. Using vuex for something so simple. I even tried using a plugin vue-global-var that uses vuex internally , that didn’t seem to work either. Same problem. You can intialize but can’t change.

                          1 Reply Last reply Reply Quote -1
                          • s.molinari
                            s.molinari last edited by

                            It’s not BS. Having general global variables is an anti-pattern and not “something so simple”. Vuex is, however, a global store for data and offers reactivity to boot, and thus since it is a viable, accepted and “built-in” pattern to Vue, it is the solution to “global data” for your app.

                            Scott

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post