How to Change the Color of an Element After Some Time in Vue.js

I’m working with Vue.js right now, and I’m trying to figure out how to change the color of an element after a few seconds. I’ve looked online and tried asking AI for help, but nothing really works, and when I read the answers, I just get more confused. I don’t understand most of it. I want to learn how to do this in a really simple way.

This is just a prototype code I’m working with to help me learn Vue.js, and I really need help getting it to work. Can you show me a simple way to do it? I’m still new to this, so I just want something easy to understand.

<template>
  <div>
    <h1>Change Color After Some Time in Vue.js</h1>
    
    <p :style="{ color: textColor }">
      This text will change color after {{ delay }} seconds.
    </p>
    
    <p>{{ message }}</p>
    
    <button @click="changeColorManually">Change Color Now</button>

    <input 
      type="number" 
      v-model="delay" 
      placeholder="Set delay in seconds" 
      min="1"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'black',
      delay: 3,
      message: 'The color will change automatically after a set delay.',
    };
  },
  mounted() {
    this.changeColorAfterDelay();
  },
  methods: {
    changeColorAfterDelay() {
      setTimeout(() => {
        this.textColor = 'blue';
        this.message = 'Color has been changed automatically!';
      }, this.delay * 1000);
    },
    changeColorManually() {
      this.textColor = 'green';
      this.message = 'Color has been changed manually!';
    },
  },
  watch: {
    delay(newDelay) {
      this.message = 'Color will now change after ' + newDelay + ' seconds.';
      this.changeColorAfterDelay();
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 20px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

input {
  margin-top: 10px;
  padding: 5px;
  font-size: 16px;
  width: 80px;
}
</style>

You need to understand how setTimeout() works, and how to reset it. These are basic things. I created an answer (Vue SFC Playground) for you as a starting point:

<script setup>
import { ref, watch, onMounted } from 'vue';

const getRandomColor = () => {
    return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;
}

const textColor = ref('black');
const delay = ref(3);
const message = ref('The color will change automatically after a set delay.');
const timer = ref();
const newColor = ref(getRandomColor())


const changeColorAfterDelay = () => {
  newColor.value = getRandomColor();
  timer.value = setTimeout(() => {
    textColor.value = newColor.value;
    message.value = 'Color has been changed automatically!';
  }, delay.value * 1000);
};

const changeColorManually = () => {
  clearTimeout(timer.value);
  delay.value = undefined;
  textColor.value = 'green';
  message.value = 'Color has been changed manually!';
};

watch(delay, newDelay => {
  if(newDelay){
    clearTimeout(timer.value);
    changeColorAfterDelay();
  }
})

onMounted(changeColorAfterDelay);
</script>

<template>
  <div>
    <h1>Change Color After Some Time in Vue.js</h1>
    
    <p :style="{ color: textColor }">
      This text will change
      <span v-if="delay">color after {{ delay }} seconds. New color: {{ newColor }}</span>
      <span v-else>after inputting value</span>
    </p>
    
    <p>{{ message }}</p>
    
    <button @click="changeColorManually">Change Color Now</button>

    <input 
      type="number" 
      v-model="delay" 
      placeholder="Set delay in seconds" 
      min="1"
    />
  </div>
</template>