JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div id="game-box">
    <div v-for="(sign, index) in matrix" class="grid-item" @click="handleClick(index)">
      {{ sign }}
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

#game-box {
  width: 150px;
  display: block;
  margin: 0px auto;
  padding: 0px;
  background: green;
}

.grid-item {
  float: left;
  width: 33.333%;
  height: 50px;
  background: yellow;
  border: 1px solid green;
  margin: 0px;
  text-align: center;
}

JavaScript

var vm = new Vue({
    el: "#app",
    data: {
        matrix: ["", "", "", "", "", "", "", "", ""],
    },
    methods: {
        handleClick: function(index) {
        		console.log(index);
            console.log("event triggered");
        }
    }
})