How to make a print effect?

Question

Vue.js

I want to make the effect of typing text using Vue, like here - https://github.com/mattboldt/typed.js/

But for some reason the string is built not "printed" gradually, but one at a time. How to make text change spell by letter? https://codepen.io/kodej/pen/gGERPR

Answer 1

Add a property that will indicate how many characters to show:

data: () => ({
  showChars: 0,
  ...
}),

Strip the appropriate number of characters from the full string and display:

computed: {
  typedString() {
    return this.string.slice(0, this.showChars);
  },
},

<h2>{{ typedString }}</h2>
You start the interval by which you increase the length of the displayed string:

mounted() {
  const intervalID = setInterval(() => {
    if (++this.showChars === this.string.length) {
      clearInterval(intervalID);
    }
  }, 50);
},

https://jsfiddle.net/397wqoby/