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

    Component's text color not properly updated (Solved)

    Help
    3
    10
    171
    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.
    • mboeni
      mboeni last edited by mboeni

      Hi there

      I have a theme system (Electron app) that offers a dark and a light mode UI. Part of the theme change is the text color of various components. Here are a few examples how color is applied to text / icons:

      <q-avatar :style="{ color: $textColor1 }" icon="settings" size="48px" />
      <q-item-label class='text-caption' :style="{color: $textColor2}" lines="1">NEW PASSWORD</q-item-label>
      

      When I change the theme, I change the color of $textColor1 accordingly.

      My issue now is that the theme change DOES set the color of $textColor1 but the component’s text color is not updated. I have to manually refresh (F5) the app for the text color to change correctly.

      Why is that and how do I fix this?

      Cheers,
      michael

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

        Assign to a variable, in data () and use the variable (which is reactive) over your sass variable (which is not reactive).

        mboeni 1 Reply Last reply Reply Quote 0
        • mboeni
          mboeni @Hawkeye64 last edited by mboeni

          @Hawkeye64 Yep, that seems to work in the MainLayout. Although, I strangely get Error in render: "TypeError: Cannot read property 'localTextColor1' of undefined" errors when doing this on a page: :style="{ color: this.localTextColor1 }

          The same code works in the MainLayout.vue file…any ideas why this is?

          Cheers,
          m

          Here’s the full error:

          vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'localTextColor1' of undefined"
          
          found in
          
          ---> <QSplitter>
                 <QPage>
                   <Settings> at src/pages/Settings.vue
                     <QPageContainer>
                       <QLayout>
                         <MainLayout> at src/layouts/MainLayout.vue
                           <App> at src/App.vue
                             <Root>
          warn @ vue.runtime.esm.js?2b0e:619
          logError @ vue.runtime.esm.js?2b0e:1884
          globalHandleError @ vue.runtime.esm.js?2b0e:1879
          handleError @ vue.runtime.esm.js?2b0e:1839
          Vue._render @ vue.runtime.esm.js?2b0e:3544
          updateComponent @ vue.runtime.esm.js?2b0e:4060
          get @ vue.runtime.esm.js?2b0e:4473
          Watcher @ vue.runtime.esm.js?2b0e:4462
          mountComponent @ vue.runtime.esm.js?2b0e:4067
          Vue.$mount @ vue.runtime.esm.js?2b0e:8409
          init @ vue.runtime.esm.js?2b0e:3118
          createComponent @ vue.runtime.esm.js?2b0e:5972
          createElm @ vue.runtime.esm.js?2b0e:5919
          createChildren @ vue.runtime.esm.js?2b0e:6047
          createElm @ vue.runtime.esm.js?2b0e:5948
          createChildren @ vue.runtime.esm.js?2b0e:6047
          createElm @ vue.runtime.esm.js?2b0e:5948
          patch @ vue.runtime.esm.js?2b0e:6471
          Vue._update @ vue.runtime.esm.js?2b0e:3939
          updateComponent @ vue.runtime.esm.js?2b0e:4060
          get @ vue.runtime.esm.js?2b0e:4473
          Watcher @ vue.runtime.esm.js?2b0e:4462
          mountComponent @ vue.runtime.esm.js?2b0e:4067
          Vue.$mount @ vue.runtime.esm.js?2b0e:8409
          init @ vue.runtime.esm.js?2b0e:3118
          createComponent @ vue.runtime.esm.js?2b0e:5972
          createElm @ vue.runtime.esm.js?2b0e:5919
          patch @ vue.runtime.esm.js?2b0e:6471
          Vue._update @ vue.runtime.esm.js?2b0e:3939
          updateComponent @ vue.runtime.esm.js?2b0e:4060
          get @ vue.runtime.esm.js?2b0e:4473
          Watcher @ vue.runtime.esm.js?2b0e:4462
          mountComponent @ vue.runtime.esm.js?2b0e:4067
          Vue.$mount @ vue.runtime.esm.js?2b0e:8409
          init @ vue.runtime.esm.js?2b0e:3118
          merged @ vue.runtime.esm.js?2b0e:3301
          createComponent @ vue.runtime.esm.js?2b0e:5972
          createElm @ vue.runtime.esm.js?2b0e:5919
          updateChildren @ vue.runtime.esm.js?2b0e:6210
          patchVnode @ vue.runtime.esm.js?2b0e:6313
          patch @ vue.runtime.esm.js?2b0e:6476
          Vue._update @ vue.runtime.esm.js?2b0e:3942
          updateComponent @ vue.runtime.esm.js?2b0e:4060
          get @ vue.runtime.esm.js?2b0e:4473
          run @ vue.runtime.esm.js?2b0e:4548
          flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4304
          (anonymous) @ vue.runtime.esm.js?2b0e:1980
          flushCallbacks @ vue.runtime.esm.js?2b0e:1906
          Promise.then (async)
          timerFunc @ vue.runtime.esm.js?2b0e:1933
          nextTick @ vue.runtime.esm.js?2b0e:1990
          queueWatcher @ vue.runtime.esm.js?2b0e:4396
          update @ vue.runtime.esm.js?2b0e:4538
          notify @ vue.runtime.esm.js?2b0e:730
          reactiveSetter @ vue.runtime.esm.js?2b0e:1055
          (anonymous) @ vue-router.esm.js?8c4f:2748
          (anonymous) @ vue-router.esm.js?8c4f:2747
          updateRoute @ vue-router.esm.js?8c4f:2174
          (anonymous) @ vue-router.esm.js?8c4f:2037
          (anonymous) @ vue-router.esm.js?8c4f:2159
          step @ vue-router.esm.js?8c4f:1843
          step @ vue-router.esm.js?8c4f:1850
          step @ vue-router.esm.js?8c4f:1850
          runQueue @ vue-router.esm.js?8c4f:1854
          (anonymous) @ vue-router.esm.js?8c4f:2154
          step @ vue-router.esm.js?8c4f:1843
          (anonymous) @ vue-router.esm.js?8c4f:1847
          (anonymous) @ vue-router.esm.js?8c4f:2139
          (anonymous) @ vue-router.esm.js?8c4f:1886
          (anonymous) @ vue-router.esm.js?8c4f:1962
          Promise.then (async)
          (anonymous) @ vue-router.esm.js?8c4f:1909
          (anonymous) @ vue-router.esm.js?8c4f:1930
          (anonymous) @ vue-router.esm.js?8c4f:1930
          flatMapComponents @ vue-router.esm.js?8c4f:1929
          (anonymous) @ vue-router.esm.js?8c4f:1865
          iterator @ vue-router.esm.js?8c4f:2120
          step @ vue-router.esm.js?8c4f:1846
          step @ vue-router.esm.js?8c4f:1850
          step @ vue-router.esm.js?8c4f:1850
          step @ vue-router.esm.js?8c4f:1850
          step @ vue-router.esm.js?8c4f:1850
          runQueue @ vue-router.esm.js?8c4f:1854
          confirmTransition @ vue-router.esm.js?8c4f:2147
          transitionTo @ vue-router.esm.js?8c4f:2034
          push @ vue-router.esm.js?8c4f:2459
          push @ vue-router.esm.js?8c4f:2782
          handler @ vue-router.esm.js?8c4f:1066
          invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
          invoker @ vue.runtime.esm.js?2b0e:2179
          original._wrapper @ vue.runtime.esm.js?2b0e:6911
          Show 18 more frames
          vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'localTextColor1' of undefined
              at fn (Settings.vue?8898:40)
              at Object.normalized [as before] (vue.runtime.esm.js?2b0e:2590)
              at slot (slot.js?dde5:2)
              at Proxy.render (QSplitter.js?8562:156)
              at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
              at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
              at Watcher.get (vue.runtime.esm.js?2b0e:4473)
              at new Watcher (vue.runtime.esm.js?2b0e:4462)
              at mountComponent (vue.runtime.esm.js?2b0e:4067)
              at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
          

          Strangely enough, I only get this on one page…other pages that use the same syntax work fine… -.-

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

            Very strange…The problem only presents itself when I use this.localTextColor1 in the template section of the vue file. In the script section, it works properly. And this problem exists currently only on one page…What could that be?

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

              Okay, I’ve got a lead… The <q-splitter> component is the culprit. Whenever I use this between <q-splitter> </q-splitter> I DO get the error. Outside of it, it works.

              Looks like a but to me…Can anyone confirm this?

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

                You cant refer to this in the template.

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

                  So I need to use the vars without the reference to this and that should work?

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

                    Right, it seems that I’ve got it working how. Another bug I had was interfering as well…phew… 😉

                    Thanks for your help @metalsadman @Hawkeye64

                    1 Reply Last reply Reply Quote 1
                    • Hawkeye64
                      Hawkeye64 last edited by

                      When in templated code, the “this” is implied, so if you add it, then it’s like this.this.localTextColor1

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

                        For this reason, you can’t use an import in templated code and have to assign it to your object, either data or function

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