Keyboard binding with Vue.js

Question

I am new to coding and to the Vue and i got stuck on one part.

I am building javascript calculator and I need to be able to use calculator both with mouse and keyboard. I manage to do it with mouse but i just can not work it our with keyboard. this is my code. Can someone please help me?

I know that i need to bind it somehow to the input but i just can not make it work.

<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

You're not using the keyboardInput with any actual key press. You can simply connect it like this:

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

And then in the code:

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

But I would suggest rewriting this keyboardInput as I'm not sure why it's working like this :)