JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]"></script>
<div id="demo">
<h2>{{myArray}}</h2>
<h3>{{arrayItem}}</h3>
<br>
<button @click="startCircular()">start</button>
</div>
JavaScript
var demo = new Vue({
el: '#demo',
data: {
myArray:['apple','bpple','cpple'],
arrayItem: ''
},
methods:{
startCircular(){
var i = 0; // the index of the current item to show
vm = this;
setInterval(function() { // setInterval makes it run repeatedly
vm.arrayItem = vm.myArray[i++];
if (i == vm.myArray.length) i = 0; // reset to first element if you've reached the end
}, 1000);
}
}
})