[Vuejs]-Problem text not updating after vue 3 upgrade

by

1👍

✅

Try to make your data reactive with ref:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    let typeValue = ref("")
    let typeStatus = false
    let displayTextArray = ['Art', 'Science', 'Math', 'Everything']
    let typingSpeed = 70
    let erasingSpeed = 70
    let newTextDelay = 1000
    let displayTextArrayIndex = ref(0)
    let charIndex = 0
    
    setTimeout(typeText, newTextDelay);
    
    function typeText() {
      if (charIndex < displayTextArray[displayTextArrayIndex.value].length) {
        if (!typeStatus) {
          typeStatus = true;
        }
        typeValue.value += displayTextArray[displayTextArrayIndex.value].charAt(charIndex);
        charIndex++;
        setTimeout(typeText, typingSpeed);
      } else {
        typeStatus = false;
        if (displayTextArrayIndex.value + 1 >= displayTextArray.length) {
          return
        }
        setTimeout(eraseText, newTextDelay);
      }
    }

    function eraseText() {
      if (charIndex > 0) {
        if (!typeStatus) {
          typeStatus = true;
        }
        typeValue.value = displayTextArray[displayTextArrayIndex.value].substring(0, charIndex - 1);
        charIndex -= 1;
        setTimeout(eraseText, erasingSpeed);
      } else {
        typeStatus = false;
        displayTextArrayIndex.value++;
        setTimeout(typeText, typingSpeed + 1000);
      }
    }
    return {
      typeValue, eraseText, typeText
    };
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <input type="text" :value="typeValue" />
</div>
👤Nikola Pavicevic

Leave a comment