JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://unpkg.com/vue"></script>
<div id='app'>
  <h5>{{text}}</h5>
  <button @click='stopInterval'>
  Click me! to stop interval
  </button>
</div>

JavaScript

new Vue({
	name: 'demo',
  el: '#app',
  data: {
  	textArray: ['hi', 'there', 'from', 'Vue!'],
    text: '',
    pos: 0,
    intervalId: null
  },
  mounted () {
  	this.intervalId = setInterval(this.changeText, 1000);
  },
  methods:{
  	changeText(){
    	if(this.pos == this.textArray.length) this.pos = 0
    	this.text = this.textArray[this.pos]
      this.pos++
    },
    stopInterval (){
    	clearInterval(this.intervalId)
    }
  }
})