Component's text color not properly updated (Solved)

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

Hawkeye64

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

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

mboeni

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?

mboeni

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?

metalsadman

You cant refer to this in the template.

mboeni

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

mboeni

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

Hawkeye64

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

Hawkeye64

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