Q&A
前提・実現したいこと
Vue.jsで○×ゲームを作成しようとしています。
td要素でv-forを用いて9回ループしているのですが、3回毎に</tr><tr>で区切って3×3の表にしたいと考えています。
試したこと
templateの中に、 {{ (index == 3) ? "</tr><tr>" : "" }}のように条件を追加しようとしましたがtdの後ではindexが使用できないので断念しました。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <link rel="stylesheet" href="style.css"> 7 8 <title>Tic Tac Toe</title> 9</head> 10<body> 11 <div id="app"> 12 <table> 13 <tr> 14 <td is="mark-area" v-for="(cell, index) in state" v-bind:key="cell.id" v-bind:index="index" v-on:mark="mark(index)" v-bind:cell="cell"></td> 15 </tr> 16 </table> 17 </div> 18</body> 19<script src="main.js"></script> 20</html>
JavaScript
1Vue.component('mark-area', { 2 props: ['cell', 'index'], 3 methods: { 4 draw: function () { 5 this.$emit('mark'); 6 } 7 }, 8 template: `<td v-on:click.once="draw" v-bind:id="index">{{ (cell === 1) ? "×" : (cell === 0) ? "○" : "" }}</td>` 9}) 10 11new Vue({ 12 el: '#app', 13 methods: { 14 mark: function (cell) { 15 this.$set(this.state, cell, this.turn); 16 this.changeTurn(); 17 }, 18 changeTurn: function () { 19 this.turn = this.turn ? 0 : 1; 20 } 21 }, 22 data: function() { 23 return { 24 state: {0:'', 1:'', 2:'', 3:'', 4:'', 5:'', 6:'', 7:'', 8:''}, 25 turn: 0 26 } 27 } 28}) 29
css
1table, td { 2 border-style: solid; 3 border-collapse: collapse; 4} 5td { 6 text-align: center; 7 vertical-align: middle; 8 font-size: 40px; 9 width: 150px; 10 height: 150px; 11}
回答1件
0
ベストアンサー
stateを配列の配列にして、v-forをネストしたほうが良いと思います。
html
1 <table> 2 <tr v-for="(raw, rawi) in state" :key="rawi"> 3 <td v-for="(cell, celli) in raw" :key="rawi * 10 + celli">{{cell}}</td> 4 </tr> 5 </table>
javascript
1state: [["a", "b", "c"], ["d", "e", "f"], ["g", "h", "i"]],
投稿2019/05/13 07:36
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/13 08:06