JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="app">
  <div>
    <table-component table-name="테이블1" team-name="팀1" end=100></table-component>
    <table-component table-name="테이블2" team-name="팀2" end=200></table-component>
    <table-component table-name="테이블3" team-name="팀3" end=120></table-component>
    <table-component table-name="테이블4" team-name="팀4" end=120></table-component>
  </div>
</div>

<template id="table-component">
  <div>
  
  <h1>{{tableName}} / {{ teamName }} : {{ remain }}</h1>
  </div>
</template>

JavaScript

const TABLE_COMPONENT = {
	template: '#table-component',
	props: {
  	tableName: String,
    teamName: String,
  	end: {
    	type: [Number, String],
	    default: () => 100
    }
  },
  data () {
  	return {
    	start: 0
    }
  },
  computed: {
  	remain () {
    	return this.end - this.start
    }
  },
  mounted () {
  	setInterval(() => {
    	this.start++
    }, 1000)
  }
}

new Vue({
	el: '#app',
	data: function () {
		return {
    	
    }
  },
  components: {
  	'table-component': TABLE_COMPONENT
  }
})