【Vue.js】ループで作成した表のマスの値の取り方がわかりません

Question

##現したいこと

v-forを使い、ブロックを生成してオセロのボードのような形は作成できたのですが、セルごとのデータを取得できず、動作を追加する方法がわかりません。
例えば、左から2マス、上から3マスのセルのデータを取得するにはどうすれば良いのでしょうか？

該当のソースコード

    <div id="app">        
        <div id="drop_area">
            <table id="snaptarget" class="ui-widget-header">
                <tr v-for="(MainTableTR, y) in 20" :key="y">
                    <td v-for="(MainTableTD, x) in 20" :key="x" class="MainTableCell MainTableBorder" @click="onClick">
                        {{y}},{{x}}
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data:{
            },
        })
    </script>

上記コードを出力した画像

試したこと

{{y}}, {{x}}を出力してマスごとにきちんと0, 0のように値が割り振られていることは確認できました。

質問の意図

上の画像のような別で作成したピースを上のボードにドラッグ&ドロップしてはめ込みたかったのですが、ドロップ地点のボードの値の取り方がわからず、重なった部分の色を変えることができなかったので、まずはボードの値の取り方をお聞きしたく思い質問いたしました。

Comments

[退会済みユーザー]

「左から2マス、上から3マスのセルのデータを取得するにはどうすれば良いのでしょうか？」とは、
たとえば、左から2マス、上から3マスのセルのデータをクリックしたときに、そのクリックしたところの座標（2,3）をうまく取得したい、という意味でしょうか？

それとも あらかじめ各マスに何らかのデータを格納しておき、後から任意の指定したマス（たとえば「左から2マス、上から3マス」）のデータをプログラム中で取得していろいろ加工したい、という意味でしょうか？

[yyk]

答え方に迷ってしまったので質問させていただいた経緯を最下部に追記いたしました。
不明点がありましたらご質問よろしくお願い致します。

Answer 1

下記は、クリックしたマスの位置を表示する例です。
onClick関数に引数を渡すことで、位置を知ることができます。

<div id="app">
  <div id="drop_area">
    <table id="snaptarget" class="ui-widget-header">
      <tr v-for="(MainTableTR, y) in 20" :key="y">
        <td v-for="(MainTableTD, x) in 20" :key="x" class="MainTableCell MainTableBorder" @click="onClick(y, x)">
          {{y}},{{x}}
        </td>
      </tr>
    </table>

  </div>
  {{message}}
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message:""
    
    },
    methods: {
      onClick: function (y, x) {
        // y, x はそれぞれの座標
        console.log(y, x)
        this.message = "Click y:" + y + " x:" + x
      },
    }
  })
</script>

Comments

[yyk]

ありがとうございます！！
回答もとても早くいただき、本当に助かりました。