Vue

by Vince Oveson

HTML

<div id="app">
  <pre v-text="`${ output }`" ref="pre"></pre>
</div>

CSS

#app {
  padding: 20px;
  width: 100%;
}

pre {
  background: #454545;
  color: white;
  font-family: monospace;
  border-radius: 5px;
  padding: 10px;
  width: 450px;
  height: 300px;
  overflow: auto;
}

Vue

new Vue({
  el: "#app",
  data: {
    count: 500,
    output: ''//[]
  },
  methods: {
    appendText(newText) {
      this.output = this.output + "\n" + newText;
      //this.output.push(newText);
    },
    scrollToEnd() {
      var container = this.$refs.pre;
      container.scrollTop=container.scrollHeight + 20;
    }
  },
  watch: {
    output() {
      this.scrollToEnd();
    }
  },
  mounted() {
    this.appendText("Loading...");
    let looper = 500;
    while (looper) {
      var vm = this;
      setTimeout(() => {
        let line = `$ The quick brown fox jumped over the lazy dog ${ vm.count } time${ vm.count == 1 ? '' : 's'}`;
        vm.$nextTick(() => {
          vm.appendText(line);
          vm.count--;
        });
      }, 30*(-1*(looper-500)));
      looper--;
    }
    setTimeout(() => this.scrollToEnd(), 30*501);
  }
});