【Vue.js】超シンプルな神経衰弱を作ってみた

以前、Vue.jsで神経衰弱を作ろうとして挫折し、泣く泣くjQueryで作成したことがあります。
⇒【jQuery】神経衰弱ゲームの作り方（簡易Ver.）

今日はリベンジで、その超シンプル神経衰弱をVue.jsで作り直してみました！

完成品

とりあえず動作すればいいやという感じの、超シンプルな神経衰弱です。
「Result」タブをクリックすると結果が表示されます。

・カードをクリックすると数字が表示されます。
・同じ数字のカードを2連続でクリックするとカードが赤くなります。

HTML

<ul id="playarea">
  <li v-for="(card, index) in cards"
      v-on:click="isClick(index)"
      v-bind:class="{red: list_success[index] === 1}"
      >
    <span v-show="one === index || two === index">{{card}}</span>
  </li>        
</ul>

・カードにindexを設定して、何番目のカードが操作されているのかを把握できるようにしています。
・v-bindでredクラスを付与しています。
・にカード番号を表示しています。oneには1回目にクリックしたカードのindexが入ります。twoは2回目にクリックしたカードのindexです。

CSS

#playarea{
    list-style: none;
  }
  #playarea li{
    margin: 5px;
    width: 30px;
    height: 50px;
    float: left;
    border:solid 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .red{
    background-color: red;
  }

・display:flex　でカードを横に配置しています。
・redクラスでカードの色を赤くしています。

Vue.js

var total = 10;    //カードの枚数

var app = new Vue({
    el: "#playarea",
    data: {
        one: -1,            //1枚目のカードのインデックス
        two: -1,            //2枚目のカードのインデックス
        array_cards: [],    //カード一覧
        list_success: [],   //カード一致判定結果の格納（変色時に使用）
        isFirst: true       //1枚目のカードか判定
          },  
    computed: {
        cards: function () {
            var vm = this;
            //数字を2組ずつ作成
            for(i=1; i <= total/2; i++) {
                vm.array_cards.push(i,i);
                vm.list_success.push(0,0);
            }
            //array_cards配列の数値をランダムに並び替える
            vm.array_cards.sort(function() {
                return Math.random() - Math.random();
            });
            return vm.array_cards;
        },       
    },   
    methods: {
        isClick: function (index) {
            var vm = this;           
            if(vm.isFirst){
                //１枚目                
                vm.one = index;
                vm.two = -1;
                vm.isFirst = false;
              }else{
                //2枚目
                vm.two = index;
                //1枚目と2枚目の値が同じ場合はli要素の背景色を赤にする
                if(vm.array_cards[vm.one] === vm.array_cards[vm.two]){
                    vm.list_success[vm.one] = 1;
                    vm.list_success[vm.two] = 1;
                }
                vm.isFirst = true;    
            }   
        },      
    },
});