vue.jsでクリックで取得した値を別の場所にクリックして代入したい

Question

v-on:clickでクリックした場所の値を取得することは出来ているのですが
取得した値を別の場所にクリックで移したいと考えています。

<div id="tables">
    <table>
        <tr>
            <td v-on:click="m_board(board_1)">{{ board_1 }}</td>
            <td v-on:click="m_board(board_2)">{{ board_2 }}</td>
            <td v-on:click="m_board(board_3)">{{ board_3 }}</td>
        </tr>
    </table>
    {{ have }}
</div>

<script>
var tables = new Vue({
  el: '#tables',
  data: {
    have:'',
    board_1:'○',
    board_2:'',
    board_3:'',
  },
  methods: {
    m_board: function (value,have) {
      this.have = value
    }
  }
})
</script>

左端のTDをクリックすると「○」を{{ have }}に入れる事が出来ます。
右端のTDをクリックした際に{{ have }}の値を入れれるようにしたいのですが、クリック時にboard_3認識する方法がわかりません。

v-on:clickにもう１つ追加して空であれば入れるようにすれば良いと考えているのですが、クリックした場所のイベント（ここでいうboard_3）をどうすれば認識出来るのかがわかりません。

やり方自体が間違っているのかもしれませんが、実現するためのヒントなどアドバイスいただければと思います。

Answer 1

これでどうでしょうか？

            <td v-on:click="m_board('board_1')">{{ board_1 }}</td>
            <td v-on:click="m_board('board_2')">{{ board_2 }}</td>
            <td v-on:click="m_board('board_3')">{{ board_3 }}</td>

Comments

[zeijaku.net]

確認が遅れてしまい申し訳ありません。

こちら試してみました。
文字列として受け取ればよかっただけですので、実際の値の取得をv-onにもう１つ追加してmethod側で処理してやればいけそうです。
ありがとうございます。

Answer 2

まず、m_boardの引数haveは現状使われていませんので必要ないですね。

その上で、現状のコードを最大限活用した方法としては、ブラケット記法を用いて、どのdataにアクセスするのかを指定することが考えられます。

<div id="tables">
    <table>
        <tr>
            <td v-on:click="m_board(board_1, 'board_1')">{{ board_1 }}</td>
            <td v-on:click="m_board(board_2, 'board_2')">{{ board_2 }}</td>
            <td v-on:click="m_board(board_3, 'board_3')">{{ board_3 }}</td>
        </tr>
    </table>
    {{ have }}
</div>

<script>
var tables = new Vue({
  el: '#tables',
  data: {
    have:'',
    board_1:'○',
    board_2:'',
    board_3:'',
  },
  methods: {
    m_board: function (value, target) {
      if (!value) {
        this[target] = this.have
      }
      this.have = value
    }
  }
})
</script>

m_boardの第2引数に文字列を渡し、this[target]でアクセスしています。
ただ、個人的には、やや筋悪な感じがします。

下記のようにboard_1などをまとめて配列にするほうが、データ構造が明確になりますし、v-forも使えるのでベターでしょう。

<div id="tables">
    <table>
        <tr>
            <td v-for='(value, index) in boardVals' v-on:click="m_board(value, index)">{{value}}</td>
        </tr>
    </table>
    {{ have }}
</div>

<script>
var tables = new Vue({
  el: '#tables',
  data: {
    have:'',
    boardVals: ['○', '', '']
  },
  methods: {
    m_board: function (value, index) {
      if (!value) {
        this.boardVals[index] = this.have
      }
      this.have = value
    }
  }
})
</script>