It seems like a simple task, but for some reason it's not working. I have double-checked the implementation below and everything looks fine with
this.showStr += this.mainStr.charAt(i) data(){
return {
mainStr: "Hello, my name is Eldar and I'm web-developer",
showStr: ''
}
},
methods:{
showString() {
for (let i = 0; i < this.mainStr.length; ++i) {
this.delay(i);
}
},
delay(i){
function delay() {
setTimeout(() => {
this.showStr += this.mainStr.charAt(i)
}, 2000)
}
}
},
mounted(){
this.showString();
}
Apologies for the mix-up. Here is the correct code that doesn't work:
<template>
<p>{{ showStr }}</p>
</template>
<script>
export default {
name: "GreetingTitle.vue",
data(){
return {
mainStr: "Hello, my name is Eldar and I'm web-developer",
showStr: ''
}
},
methods:{
showString() {
for (let i = 0; i < this.mainStr.length; ++i) {
this.delay(i);
}
},
delay(i){
setTimeout(() => {
this.showStr += this.mainStr.charAt(i)
}, 2000)
}
},
mounted(){
this.showString();
}
}
</script>