【Vue.js】配列の回転が一度しかできないです。

Question

やりたいこと

現在配列の回転を実装したいと思っています。
そこで以下のコードを書いたのですが、1回転はするが、1度回転するとそれ以降はボタンを押しても回らずにずっと1回転した配列の状態になってしまっています。
なので、どうにか押すたびに回転させることはできないかヒントのみでも助かりますのでご教授お願いしたいです。

現在のコード

<template>
  <div id="app">
      <table>
        <tr 
          v-for="(chooseBlockRow, vi) in chooseBlock"
          :key="vi">
          <td 
            class="blockCell2"
            v-for="(chooseBlockCell, mi) in chooseBlockRow" 
            :key="mi"
            :class="`is-${chooseBlockCell.code}`">
          </td>
        </tr>
      </table>
    <div>
      <button @click.prevent @click="turnLeft()">左に1回転</button>
    </div>
  </div>
</template>

export default {
  name: 'App',
  data (){
    const blocks = [
      { name:0,
        data:[
          [{code:1}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
      ]},
      { name:1,
        data:[
          [{code:1}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:1}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
          [{code:0}, {code:0}, {code:0}, {code:0}, {code:0}],
      ]},
    ];
    const chooseBlock = [];
      for (let y = 0; y < 5; y++ ) {
        const chooseBlockRow = []
        for (let x = 0; x < 5; x++){
          const chooseBlockCell = {
            y: y,
            x: x,
            code: 0,
          };
        chooseBlockRow.push(chooseBlockCell)
      }
      chooseBlock.push(chooseBlockRow)
      }

    return{
      blocks:blocks,
      haveItem: [],
      chooseBlock: chooseBlock,
    };
  },
  methods:{
    turnLeft(){
      this.haveItem = this.blocks[0].data
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
          this.chooseBlock[4 - i][j].code = this.haveItem[j][i].code
        }
      }
    },
  }

試したこと

returnにもう一つデータの保存用に空のデータを作り、そこに完成したデータを入れるようにしてみましたが、クリックイベントが発動したタイミングで読み込むデータを変えれずに同じ形にしか成りませんでした。

Answer 1

毎回「最初の状態」をもとに反時計回りに90度回転した状態を算出しているので、最初の状態から90度回転した結果にしかなりません。
回転させた結果を元に90度回転した状態を算出してください。

  data (){
  
    // (省略)
    
    return{
      blocks:blocks,
      haveItem: [],
      chooseBlock: blocks[0].data,  // 最初の状態を設定
    };
  },
  methods:{
    turnLeft(){
      this.haveItem = JSON.parse(JSON.stringify(this.chooseBlock)) // 回転させた結果を元にする
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
          this.chooseBlock[4 - i][j].code = this.haveItem[j][i].code
        }
      }
    },
  }

Comments

[yyk]

原因と考え方をわかりやすく教えていただきありがとうございます！！
コードの書き方も知らなかったので視野も広がりました！