3👍
Remove v-once
and it will work as expected. The "bug" is a feature. It’s what v-once
does:
On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.
0👍
First you don’t need an intermediate ref isDarkMode
. Like don’t clutter code with variables that used only once on the next line and initialized with a couple of words.
Second use watch
only if you mutate data, for derived calculated values like isDarkMode
use computed
.
Third move your static homeBackground
class to class
static attribute so it would be obvious which classes are static and which ones are dynamic.
And the last but the most important:
try to remove v-once
since currentPresetName
could change to the needed dark
value after the first rendering of the element.
JS expressions inside a template are computed
so try:
<div class="homeBackground" :class="{backgroundDark: currentPresetName === 'dark'}"></div>