I'm currently working on Vue code that looks like this.
<template>
<h1 :class="{ disabled: checkClass() }">Hello</h1>
</template>
<script setup lang="ts">
import { ref } from "vue";
const a = ref(1);
function checkClass() {
if (a.value === 2) {
return true;
}
return false;
}
setTimeout(()=>{
a.value = 2;
}, 3000)
setTimeout(()=>{
a.value = 1;
}, 6000)
</script>
<style>
.disabled {
background: red;
color: blueviolet;
}
</style>
After changing a.value twice, I noticed that the function seems to be triggered again, which is causing confusion.
I am curious to understand why the background color of
<h1 :class="{ disabled: checkClass() }">Hello</h1>Any insights would be appreciated. Thank you.