我正在尝试每 2 秒将一个字符添加到一个字符串中，但它不起作用，控制台中没有错误。 视图

Question

I know task is super simple. But I do not why it's not working. Here is a code below how I implemented, as far as I checked this.showStr += this.mainStr.charAt(i) there is no mistake in this part is just something wrong with connection loop and setTimer. Does anybody see an error?

  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();
  }

---

Ohh I'm sorry I published the wrong code. Here is a code which doesnt 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>

Answer 1

Your mistake is that you set all timers in one time. You need to set different timers for calling your function time by time with interval, like that:

 const mainStr = "Hello, my name is Eldar and I'm web-developer"; let showStr = ''; for (let i = 0; i < mainStr.length; ++i) { delay(i); } function delay(i){ setTimeout(() => { showStr += mainStr.charAt(i) console.log(showStr); }, 300 * i) }

UP: Vue version (for dummies):

 new Vue({ 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) }, 300 * i) } }, mounted(){ this.showString(); } }).$mount('#container');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='container'> <p>{{ showStr }}</p> </div>

Answer 2

Ohh I'm sorry I published the wrong code. Here is a code which doesnt 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>