Component's text color not properly updated (Solved)



  • 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



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



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



  • 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?



  • 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?



  • You cant refer to this in the template.



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



  • 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



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



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


Log in to reply