Vue Class Conflicks с классом CSS ⇐ CSS

[Anonymous]

Я создал геросекцию компонента. Vue в этом компоненте у меня есть метод iSdarkMode для переключения темного и светового режима. Я хочу, чтобы во время режима света добавил фоновое изображение. Это изображение будет загружаться на вкладке «Сеть», но оно не отображается на странице. Если я удалю метод iSdarkMode, он отобразит. Вот код < /p>



v-if="!isDarkMode"
class="absolute w-full h-full bg-cover bg-center hero-image"
>

class="absolute bg-opacity-50 w-full h-full"
:class="[isDarkMode ? 'bg-black' : 'bg-white']"
>

Your Ultimate Blogging Platform!

Write, Share & Earn – Join the community.


Start Writing
Explore Blogs






import { inject } from "vue";
export default {
name: "HeroSection",
setup() {
const isDarkMode = inject("isDarkMode");
return { isDarkMode };
},
};


div .hero-image {
background-image: url("/images/tech-girl.jpg") !important;
background-size: cover !important;
background-position: center;
width: 100%;
height: 100%;
z-index: -1;

}



< /code>





import { ref, provide, watch, onMounted } from "vue";
export default {
name: "App",
setup() {
const isDarkMode = ref(localStorage.getItem("theme") === "dark");

// Persist to localStorage whenever isDarkMode changes
watch(isDarkMode, (newValue) => {
localStorage.setItem("theme", newValue ? "dark" : "light");
if (newValue) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
});

provide("isDarkMode", isDarkMode); // Provide isDarkMode

// Apply initial theme on mount
onMounted(() => {
if (isDarkMode.value) {
document.documentElement.classList.add("dark");
}
});

return {};
},
};




Подробнее здесь: https://stackoverflow.com/questions/794 ... -css-class