JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>

<div id="app">
  <child-component v-for="item in items" v-bind:item="item"></child-component>
  <button @click="startUpdate">시작!</button><button @click="stopUpdate">종료!</button>
</div>

<template id="child-component">
  <div>
    {{item}}
  </div>
</template>

JavaScript

var STATUS_TYPE = [0 ,1, 2, 3, 4];

var ChildComponent = Vue.component('child-component', {
	template: '#child-component',
  props: ['item']
})

var updateInterval = '';

new Vue({
	el: '#app',
  mounted: function () {
  	this.startUpdate();
  },
  data: function () {
  	return { 
    	items: [
      	{ name: '항목 1', status: 0 },
        { name: '항목 2', status: 0 },
        { name: '항목 3', status: 0 },
        { name: '항목 4', status: 0 },
        { name: '항목 5', status: 0 },
        { name: '항목 6', status: 0 },
        { name: '항목 7', status: 0 }
      ],
      isUpdateStarted: false
    }
	},
  methods: {
    updateStatus: function () {
      this.items.forEach(function (item) {
        item.status++;
        if(item.status === 4) {
          item.status = 0
        }
      })
    },
    startUpdate: function () {
    	var vm = this;
      updateInterval = setInterval(function () {
        vm.updateStatus();
      }, 3000)
      this.isUpdateStarted = true;
    },
    stopUpdate: function () {
    	clearInterval(updateInterval)
      this.items.forEach(function (item) {
      	item.status = 0;
      });
      this.isUpdateStarted = false;
      window.alert('업데이트가 종료되었습니다.');
    }
	}
})