Vueでemitによる親コンポーネントの更新

Question

Vueでemitした値でデータの更新ができない

問題

Vueの学習のためオセロを作っています。
Vueで親コンポーネントからturnを子コンポーネントに渡し、子コンポーネントではturnをplayerTurnに格納して変更してからemitで親に返しています。
親コンポーネントでは受け取ったplayerTurnをturnに格納して値を変更しているのですが、console.logでみると変わっていますが、dataのturnはblackのままです。emitで受け取った値でdataの値を変えるにはどうしたらよいでしょうか？

(クリックするとturnの色のオセロの石を置けるのですが、ずっと黒の石のままになってしまいます。)

//親コンポーネント
template>
    <div class="game">
       <h3>{{ whosTurn(turn) }}のターン</h3>
        <Board 
        :board= "board" 
        :turn = "turn"
        @putStone="whosTurn($event)"
        />
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Board from '@/components/reversi/Board.vue'
import { Board as BoardModel } from '../../model/reversi'

export default Vue.extend({
  data() {
    return {
      board: new BoardModel(),
      turn: 'black'
    }
  },
  components: {
    Board
  },
  methods: {
    whosTurn(playerTurn: 'black' | 'white') {
      console.log(this.turn)
      this.turn = playerTurn
      console.log(this.turn)
      return playerTurn === 'black' ? '黒' : '白'
    }
  }
})
</script>

//子コンポーネント
<template>
  <div 
  :class="cellxy" 
  class="cellSize" 
  @click="putStone()"
  >
    <div class="cell"></div>
    <div class="stone"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: ['cell', 'turn'],
  data() {
    return {
      reversicell: this.cell,
      stoneState: this.cell.state,
      cellxy: `cell${this.cell.x}${this.cell.y}`,
      playerTurn: this.turn
    }
  },
  mounted() {
    this.addColorClass()
  },
  methods: {
    addColorClass() {
      const cellBox = document.querySelector(`.${this.cellxy}`)!
      cellBox.querySelector('.stone')!.classList.add(this.stoneState)
    },
    putStone() {
      if (this.stoneState === 'None') {
        this.stoneState = this.playerTurn
        this.addColorClass()
        this.playerTurn === 'white' ? this.playerTurn = 'black' : this.playerTurn = 'white'
        this.$emit('putStone', this.playerTurn)
      }
    },
  }
})
</script>

Answer 1

子コンポーネントを以下のように修正したらうまくいきました

    putStone() {
      if (this.stoneState === 'None') {
        this.playerTurn = this.turn
        this.stoneState = this.playerTurn
        this.addColorClass()
        this.playerTurn === 'white' ? this.playerTurn = 'black' : this.playerTurn = 'white'
        this.$emit('putStone', this.playerTurn)
      }
    },

Answer 2

子コンポーネントから値を受け渡すプロセスは次の３つです。

1. emitを用いて、値を受け渡す。そこにコールバック用の関数を記述する
2. 親コンポーネントにイベントハンドラを記述しコールバック用の関数と受け取り用の関数を紐付ける
3. 親コンポーネントのメソッドに受け取り用の関数を記述する

コールバック用の関数と子コンポーネントのメソッドがかぶっているのが問題のような気がします。

Comments

[naa07]

@putStone="whosTurn($event)"　のwhosTurnで受け取っているつもりだったんですが、これが間違いということでしょうか？

[FKM]

コールバック用の関数をputStoneではなくputStoneStateなどと変えてみて下さい。関数がかぶっているために処理がおかしくなっているのかもしれません。

[naa07]

子コンポーネントのputStoneメソッドを以下のように変更したらうまくいきました。
回答していただいきありがとうございます。コールバック用の関数も見直してみます。

```js
putStone() {
if (this.stoneState === 'None') {
this.playerTurn = this.turn
this.stoneState = this.playerTurn
this.addColorClass()
this.playerTurn === 'white' ? this.playerTurn = 'black' : this.playerTurn = 'white'
this.$emit('putStone', this.playerTurn)
}
},
```