I am currently in the process of reworking a component for Vue 3, specifically using their new setup script to improve the code readability. This is what the current code looks like:
export default {
name: "typeWriter",
data: () => {
return {
typeValue: "",
typeStatus: false,
displayTextArray: ['Art', 'Science', 'Math', 'Everything'],
typingSpeed: 70,
erasingSpeed: 70,
newTextDelay: 1000,
displayTextArrayIndex: 0,
charIndex: 0,
};
},
created() {
setTimeout(this.typeText, this.newTextDelay + 200);
},
methods: {
typeText() {
if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
if (!this.typeStatus) {
this.typeStatus = true;
}
this.typeValue += this.displayTextArray[this.displayTextArrayIndex].charAt(this.charIndex);
this.charIndex++;
setTimeout(this.typeText, this.typingSpeed);
} else {
this.typeStatus = false;
if (this.displayTextArrayIndex + 1 >= this.displayTextArray.length) {
return
}
setTimeout(this.eraseText, this.newTextDelay);
}
},
eraseText() {
if (this.charIndex > 0) {
if (!this.typeStatus) {
this.typeStatus = true;
}
this.typeValue = this.displayTextArray[this.displayTextArrayIndex].substring(0, this.charIndex - 1);
this.charIndex -= 1;
setTimeout(this.eraseText, this.erasingSpeed);
} else {
this.typeStatus = false;
this.displayTextArrayIndex++;
setTimeout(this.typeText, this.typingSpeed + 1000);
}
},
},
};
Below is the new Vue 3 code using
<script setup lang="ts">let typeValue = ""
let typeStatus = false
let displayTextArray = ['Art', 'Science', 'Math', 'Everything']
let typingSpeed = 70
let erasingSpeed = 70
let newTextDelay = 1000
let displayTextArrayIndex = 0
let charIndex = 0
setTimeout(typeText, newTextDelay);
function typeText() {
if (charIndex < displayTextArray[displayTextArrayIndex].length) {
if (!typeStatus) {
typeStatus = true;
}
typeValue += displayTextArray[displayTextArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(typeText, typingSpeed);
} else {
typeStatus = false;
if (displayTextArrayIndex + 1 >= displayTextArray.length) {
return
}
setTimeout(eraseText, newTextDelay);
}
}
function eraseText() {
if (charIndex > 0) {
if (!typeStatus) {
typeStatus = true;
}
typeValue = displayTextArray[displayTextArrayIndex].substring(0, charIndex - 1);
charIndex -= 1;
setTimeout(eraseText, erasingSpeed);
} else {
typeStatus = false;
displayTextArrayIndex++;
setTimeout(typeText, typingSpeed + 1000);
}
}
The issue I am facing is that the Vue 2 code correctly updates a div with the value in typeValue, whereas the new Vue 3 code is not updating the div. I have added a console.log statement and confirmed that the code is working, but the div is not reflecting the change in typeValue. I am at a loss as to why this is happening and would appreciate any guidance on resolving this in Vue 3.
As I am still new to Vue 3, it is possible that I missed something, but based on my current understanding, everything seems correct, making it difficult for me to determine why the div is not updating as expected.