vue+uniapp思路解答

问题遇到的现象和发生背景

我想要达到的结果：

1、自定义键盘选择手牌（键盘绑定点击事件），当第一个手牌选择完成后，使用键盘输入能自动显示第二个手牌。后续添加第二、三组手牌时候也能复用。求解题思路
2、目前手牌区域是DIV+mustang语法，是否需要更换成其他功能实现。怎样点击手牌后又能自动切换回当前手牌使用键盘进行更改
3、牌库中有52张牌，每完成选择后会减少当前选择手牌，怎么反向限制键盘不能再次选择该手牌。

```javascript

<template>
  <view>
    
    <view class="addhands">
      <view class="title">
        添加手牌
      view>
      <view class="cardArea">
        <view class="card1" :class="{activeCard:activeCard==1}">
          <view class="flower">
            {{cardOne.flower}}
          view>
          <view class="number">
            {{cardOne.number}}
          view>
        view>
        <view class="card2" :class="{activeCard:activeCard==2}">
          <view class="flower">
        
          view>
          <view class="number">
        
          view>
        view>
      view>

    view>
    
    <view class="cardSelect">
      <view class="flowerArea">
        <button v-for="(item,i) in flower" :key='i' @click="flowerSelected(i)" :class="{buttonSelect:i==flowerStatus}">{{item}} button>  
      view>
      <view class="numberArea">
        <button v-for="(item,i) in number" :key='i' @click="numberSelected(i)" :class="{buttonSelect:i==numberStatus}">{{item}}button>  
        <button>cbutton>
      view>
    view>
  view>
  

template>

<script>
  export default {
    data() {
      return {
        number: ["A", "K", "Q", "J", '10', '9', '8', '7', '6', '5', '4', '3', '2'],
        flower: ["♦️", "♣️", "♥️", "♠️"],
        hands: [],
        flowerStatus:-1,
        numberStatus:-1,
        cardOne:{
          flower:'',
          number:''
        },
        activeCard:1,
      };
    },
    onLoad() {
      this.createpoker()
      
    },
    methods: {
      createpoker() {
        for (let n = 0; n < this.number.length; n++) {
          for (let j = 0; j < this.flower.length; j++) {
            this.hands.push({
              hand: this.flower[j] + this.number[n]
            })
          } 
        }
      },
      //选择花色
      flowerSelected(i){
        this.flowerStatus = i
        this.cardOne.flower = this.flower[i]
      },
      numberSelected(i){
        this.numberStatus = i
        this.cardOne.number = this.number[i]
        this.activeCard = 2
        console.log(this.$refs.cardNoOne)
        // this.$refs.card1.classList.remove('activeCard')
      },
      
    },
    
  }
script>

###### 运行结果及详细报错内容

###### 我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

思路按照表格布局那样，用行和列进行定位
HTML大概如下

      <view class="cardArea" v-for="(hand,row) in hands">
        <view :class="{card:1,selected:index==cellIndex&&row==rowIndex}" v-for="(item,index) in hand" @click="choosePoker(row,index)">
          <view class="flower">
            {{item.flower}}
          </view>
          <view class="number">
            {{item.number}}
          </view>
        </view>
        <view :class="{card:1,selected:hands.length==currentIndex}" @click="choosePoker()">
          <view class="flower">
            {{selectedFlower}}
          </view>
          <view class="number">
            {{selectedNumber}}
          </view>
        </view>
      </view>

js data部分

    data() {
      return {
        number: ["A", "K", "Q", "J", '10', '9', '8', '7', '6', '5', '4', '3', '2'],
        flower: ["♦️", "♣️", "♥️", "♠️"],
        hands: [],//二位数组，如 [[{flower:'xxx',number:'xxx'}....更多牌],....更多组牌...]
        //currentIndex:0,
        rowIndex:0,//定位哪手牌
        cellIndex:0,//定位那手牌中的哪张
        selectedFlower:'',
        selectedNumber:'',
        flowerStatus:-1,
        numberStatus:-1,
        isNew:true
      };
    }

思路：

1. 建立一个数组，每次选完牌后，都往数组里面放个记录数据
   数组格式可以参考如下

   [{number: xx, flower: xx}]
   

2. 在每次选牌，做下判断，是否已经存在1.创建的数组中，如果有，则不允许选中或者置灰

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Vue-uniapp笔记