Tic Tac Toe

### 前提・実現したいこと Vue.jsで○×ゲームを作成しようとしています。 td要素でv-forを用いて9回ループしているのですが、3回毎にで区切って3×3の表にしたいと考えています。 ### 試したこと templateの中に、 {{ (index == 3) ? "" : "" }}のように条件を追加しようとしましたがtdの後ではindexが使用できないので断念しました。 ### 該当のソースコード ```html Tic Tac Toe

``` ```JavaScript Vue.component('mark-area', { props: ['cell', 'index'], methods: { draw: function () { this.$emit('mark'); } }, template: `{{ (cell === 1) ? "×" : (cell === 0) ? "○" : "" }}` }) new Vue({ el: '#app', methods: { mark: function (cell) { this.$set(this.state, cell, this.turn); this.changeTurn(); }, changeTurn: function () { this.turn = this.turn ? 0 : 1; } }, data: function() { return { state: {0:'', 1:'', 2:'', 3:'', 4:'', 5:'', 6:'', 7:'', 8:''}, turn: 0 } } }) ``` ```css table, td { border-style: solid; border-collapse: collapse; } td { text-align: center; vertical-align: middle; font-size: 40px; width: 150px; height: 150px; } ```