単一コンポーネントです
vue.js勉強のためマインスイーパーを作成しています。作成中のもので申し訳ありません。
クリックしたマスを、そのマスの状態によって画面上の表示を変化させようとしているのですが、
そのマスの状態と表示が紐づかないという事象が起きています。バインドされていないのでしょうか?
tableの中でv-forで回している箇所でtdをクリックするとboxの状態が変化します。
以下が該当のソースコードです。
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>minesweeper</h2> <button type="button" name="button" v-on:click="init">start</button> <table> <tr v-for="line in boxes"> <td v-for="box in line" v-on:click="open(box)">{{box.type}}</td> </tr> </table> </div> </template> <script> export default { name: 'minesweeper', data () { return { msg: 'Welcome to minesweeper', width: 10, height: 10, boxes: [], bomb_rate: 0.2 } }, methods: { //フィールドを初期化 init: function () { //空の配列10*10を用意 for(let i=0;i<this.height;i++){ this.boxes.push(new Array(this.width)) } var box_id = 0; //それぞれのboxの設定をする for(let i=0;i<10;i++){ for(let j=0;j<10;j++){ this.boxes[i][j] = { id: box_id, type: 'a', //ユーザーから見えるboxの種類 bomb_count: 0, //隣接しているbombの数 is_opened: false, //クリックしたかどうか is_bomb: Math.random()<this.bomb_rate, //boxにbombを埋めるかどうか } box_id++; } } //それぞれのboxのbomb_countを計算する console.log(this.boxes[0][4]) }, //ユーザーがboxをクリックしたとき open: function(box){ this.decideType(box); box.is_opened = true; console.log(box); }, //対象のboxのtypeを決定する decideType: function(box){ //すでにクリックされていた場合 if(box.is_opened){ return; } //クリックしたboxがbombだった場合 if(box.is_bomb){ box.type = "x"; return; } //bomb_countがゼロの場合、周辺のゼロのboxを開けていく if(box.bomb_count == 0){ // box.type = 'x'; //周辺のbox開封処理 } box.type = String(box.bomb_count); console.log(box); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> * { font-family: 'arial'; font-weight: bold; } /* margin */ /* font */ * { font-family: 'arial'; font-weight: bold; } table { border-collapse: collapse; border: solid thick; } td { height: 2.0em; width: 2.0em; padding: 0; border: solid thin; border-color: black; text-align: center; font-weight: bold; background-color: lightgrey; } </style>本題と関係ないですが入力中、入力欄の上に<code>というボタンが表示されますよね?
それを押すとコードを見やすい形式で挿入できるので読む人が増えて答えてもらいやすくなりますよ。
あなたの回答
tips
プレビュー