理系公務員のプログラミング日記

v-forでmasuコンポーネントを繰り返し利用する

まずはcomponentsフォルダにMasuコンポーネントを作り、styleだけ定義しました。
そのMasuコンポーネントをApp.vueから読み込み、v-forを使い、必要なマス目の数だけ作成します。

App.vue

<template>
    <div class="board">
      <Masu
        v-for="n of 9"
        v-bind:key="n"
      />
    </div>
</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  components: {
    Masu,
  },
};
</script>

<style>
.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 450px;
}
</style>

components/Masu.vue

<template>
  <div class="masu">
  </div>
</template>

<script>
export default {
  name: "Masu",
};
</script>

<style>
.masu {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  text-align: center;
  font-size: 80px;
  color: red;
}
</style>

クリックイベントに反応して○を表示させる

子コンポーネントのMasu.vueにクリックイベントに配置し、クリックしたら○が表示されるようにします。

Masu.vue

<template>
  <div class="masu" v-on:click="doAction">
    {{ masu }}
  </div>
</template>

<script>
export default {
  name: "Masu",
  data() {
    return {
      masu: "",
    };
  },
  methods: {
    doAction() {
        this.masu = "◯"
    },
  },
};
</script>

何回目のクリックであるかの情報を、子コンポーネントに伝える

アプリ全体でマスを何回クリックしたのかをカウントします。

このデータはどのコンポーネントに持たせるべきかが、Vue.jsを使うときに考えるべき大事なポイントです。

クリックした回数という情報は親であるAppコンポーネントに持たせてcountとしました。

このcountを子供のMasuコンポーネントにpropsで伝えます。

App.vue

<template>
    <div class="board">
      <Masu
        v-bind:count="count"
        v-for="n of 9"
        v-bind:key="n"
      />
    </div>
</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Masu,
  },
};
</script>

components/Masu.vue

<template>
  <div class="masu" v-on:click="doAction">
    {{ masu }}
  </div>
</template>

<script>
export default {
  name: "Masu",
  data() {
    return {
      masu: "",
    };
  },
  props: {
    count: Number,
  },
  methods: {
    doAction() {
      if(this.count % 2 === 0 ){
        this.masu = "◯" ;
      } else {
        this.masu = "×";
      }
    },
  },
};
</script>

続きます