title: Keyboard binding with Vue.js
body: <p>I am new to coding and to the Vue and i got stuck on one part. </p>
  
  <p>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?</p>
  
  <p>I know that i need to bind it somehow to the input but i just can not make it work.</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app &gt;
      &lt;div class="cont" &gt;
        &lt;div class="name"&gt;
          &lt;h1&gt;Vue Calculator&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="calc_display"&gt;
          &lt;input type="text" v-model="result" @click="keyboardInput" class="calc_result text-sm-center" &gt;
        &lt;/div&gt;
        &lt;div class="buttons"&gt;
          &lt;v-btn @click="clear" color="red darken-1" class="btn"&gt;CE&lt;/v-btn&gt;
          &lt;v-btn @click="square" color="light-blue lighten-1" class="btn"&gt;&amp;radic;&lt;/v-btn&gt;
          &lt;v-btn @click="back"  color="light-blue lighten-1" class="btn"&gt;&amp;larr;&lt;/v-btn&gt;
          &lt;v-btn @click="divide" color="light-blue lighten-1" class="btn"&gt;/&lt;/v-btn&gt;
          &lt;v-btn @click="append('7')" color="gray" class="btn"&gt;7&lt;/v-btn&gt;
          &lt;v-btn @click="append('8')" color="gray" class="btn"&gt;8&lt;/v-btn&gt;
          &lt;v-btn @click="append('9')" color="gray" class="btn"&gt;9&lt;/v-btn&gt;
          &lt;v-btn @click="times" color="light-blue lighten-1" class="btn"&gt;*&lt;/v-btn&gt;
          &lt;v-btn @click="append('4')" color="gray" class="btn"&gt;4&lt;/v-btn&gt;
          &lt;v-btn @click="append('5')" color="gray" class="btn"&gt;5&lt;/v-btn&gt;
          &lt;v-btn @click="append('6')" color="gray" class="btn"&gt;6&lt;/v-btn&gt;
          &lt;v-btn @click="add" color="light-blue lighten-1" class="btn"&gt;+&lt;/v-btn&gt;
          &lt;v-btn @click="append('1')" color="gray" class="btn" &gt;1&lt;/v-btn&gt;
          &lt;v-btn @click="append('2')" color="gray" class="btn"&gt;2&lt;/v-btn&gt;
          &lt;v-btn @click="append('3')" color="gray" class="btn"&gt;3&lt;/v-btn&gt;
          &lt;v-btn @click="minus" color="light-blue lighten-1" class="btn"&gt;-&lt;/v-btn&gt;
          &lt;v-btn @click="append('0')" color="gray" class="btn"&gt;0&lt;/v-btn&gt;
          &lt;v-btn @click="dot" color="gray" class="btn"&gt;.&lt;/v-btn&gt;
          &lt;v-btn @click="change" color="gray" class="btn"&gt;+/-&lt;/v-btn&gt;
          &lt;v-btn @click="equal" color="green darken-2" class="btn"&gt;=&lt;/v-btn&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;v-card-actions class="primary lighte-2 justify-center white--text"&gt;
        &amp;copy;2018 — &lt;strong&gt;Vue calculator&lt;/strong&gt;
      &lt;/v-card-actions&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    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' &amp;&amp; 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) =&gt; a / b
          this.setFirst();
  
        },
        times() {
          this.operator = (a, b) =&gt; a * b
          this.setFirst();
  
        },
        minus() {
          this.operator = (a, b) =&gt; a - b
          this.setFirst();
  
        },
        add() {
          this.operator = (a, b) =&gt; 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) &gt;= 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;
        }
      }
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>`</p>