使用Vue.js進行鍵盤綁定

Question

我是編碼和Vue的新手，我只停留在一部分上。

我正在構建JavaScript計算器，我需要能夠同時使用鼠標和鍵盤使用計算器。 我設法用鼠標做到了，但是我不能用鍵盤來做到這一點。 這是我的代碼。 有人可以幫幫我嗎？

我知道我需要以某種方式將其綁定到輸入，但是我無法使其工作。

<template>
  <v-app >
    <div class="cont" >
      <div class="name">
        <h1>Vue Calculator</h1>
      </div>
      <div class="calc_display">
        <input type="text" v-model="result" @click="keyboardInput" class="calc_result text-sm-center" >
      </div>
      <div class="buttons">
        <v-btn @click="clear" color="red darken-1" class="btn">CE</v-btn>
        <v-btn @click="square" color="light-blue lighten-1" class="btn">&radic;</v-btn>
        <v-btn @click="back"  color="light-blue lighten-1" class="btn">&larr;</v-btn>
        <v-btn @click="divide" color="light-blue lighten-1" class="btn">/</v-btn>
        <v-btn @click="append('7')" color="gray" class="btn">7</v-btn>
        <v-btn @click="append('8')" color="gray" class="btn">8</v-btn>
        <v-btn @click="append('9')" color="gray" class="btn">9</v-btn>
        <v-btn @click="times" color="light-blue lighten-1" class="btn">*</v-btn>
        <v-btn @click="append('4')" color="gray" class="btn">4</v-btn>
        <v-btn @click="append('5')" color="gray" class="btn">5</v-btn>
        <v-btn @click="append('6')" color="gray" class="btn">6</v-btn>
        <v-btn @click="add" color="light-blue lighten-1" class="btn">+</v-btn>
        <v-btn @click="append('1')" color="gray" class="btn" >1</v-btn>
        <v-btn @click="append('2')" color="gray" class="btn">2</v-btn>
        <v-btn @click="append('3')" color="gray" class="btn">3</v-btn>
        <v-btn @click="minus" color="light-blue lighten-1" class="btn">-</v-btn>
        <v-btn @click="append('0')" color="gray" class="btn">0</v-btn>
        <v-btn @click="dot" color="gray" class="btn">.</v-btn>
        <v-btn @click="change" color="gray" class="btn">+/-</v-btn>
        <v-btn @click="equal" color="green darken-2" class="btn">=</v-btn>
      </div>
    </div>
    <v-card-actions class="primary lighte-2 justify-center white--text">
      &copy;2018 — <strong>Vue calculator</strong>
    </v-card-actions>
  </v-app>
</template>

<script>
  export default {
    data() {
      return {
        firstNumber: null,
        result: '',
        operator: null,
        operatorClicked: false,
        sign: '',
      }
    },
    methods: {
      clear() {
        this.result = '';
      },
      change() {
        this.result *= -1;
      },
      append(number) {
        if (number == '0' && this.result == '')
          this.result = ''
        else {
          if (this.operatorClicked) {
            this.result = ''
            this.operatorClicked = false
          }
          this.result = `${this.result}${number}`
        }
      },
      dot() {
        if (this.result.indexOf('.') === -1)
          this.append('.')
      },
      setFirst() {
        this.firstNumber = this.result
        this.operatorClicked = true;
      },
      divide() {
        this.operator = (a, b) => a / b
        this.setFirst();

      },
      times() {
        this.operator = (a, b) => a * b
        this.setFirst();

      },
      minus() {
        this.operator = (a, b) => a - b
        this.setFirst();

      },
      add() {
        this.operator = (a, b) => a + b
        this.setFirst();

      },
      equal() {
        this.result = this.operator(
          parseFloat(this.firstNumber),
          parseFloat(this.result)
        )
        this.firstNumber = null
        this.sign = ''
      },
      back() {
        if (this.result)
          this.result = this.result.slice(0, -1)
      },
      square() {
        if (parseFloat(this.result) >= 0)
          this.result = Math.sqrt(parseFloat(this.result))
      },
      //THIS IS THE CODE THAT I CAN NOT MAKE IT WORK
      keyboardInput(key) {
        if (key.which === 48) {
          this.result.append(0);
        } else if (key.which === 49) {
          this.result += "1";
        } else if (key.which === 50) {
          this.result += "2";
        } else if (key.which === 51) {
          this.result += "3";
        } else if (key.which === 52) {
          this.result += "4";
        } else if (key.which === 53) {
          this.result += "5";
        } else if (key.which === 54) {
          this.result += "6";
        } else if (key.which === 55) {
          this.result += "7";
        } else if (key.which === 56) {
          this.result += "8";
        } else if (key.which === 57) {
          this.result += "9";
        } else if (key.which === 46) {
          this.result += ".";
        } else if (key.which === 42) {
          this.result += "*";
        } else if (key.which === 47) {
          this.result += "/";
        } else if (key.which === 43) {
          this.result += "+";
        } else if (key.which === 45) {
          this.result += "-";
        } else if (key.which === 13) {
          equal();
        } else if (key.which === 99) {
          clear();
        } else {
          this.result = this.result;
        }
        return true;
      }
    }
  }

</script>

`

Answer 1

您沒有在任何實際按鍵操作中使用keyboardInput 。 您可以像這樣簡單地連接它：

<div class="cont" @keyup="onKeyPress">

然后在代碼中：

methods: {
  onKeyPress(event) {
    this.keyboardInput({ which: event.keyCode })
  }
}

但是我建議重寫此keyboardInput因為我不確定為什么它會這樣工作:)