I'm brand new to coding and Vue, and I've hit a roadblock in my project.
I'm creating a JavaScript calculator that needs to be usable both with a mouse and keyboard. While I've managed to make it work with the mouse, I just can't figure out how to get it working with keyboard input. Here's my code. Can someone please assist me?
I understand that I need to somehow bind the keyboard input to the input field, but I'm struggling to make it function correctly.
<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">√</v-btn>
...
</div>
</div>
<v-card-actions class="primary lighte-2 justify-center white--text">
©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: {
...
//THIS IS THE CODE THAT I CAN NOT MAKE IT WORK
keyboardInput(key) {
...
}
}
}
</script>
`