Reputation: 1631
I'm getting the following error message when trying to implement simple keyboard (https://hodgef.com/simple-keyboard) into my page:
TypeError: Cannot call a class as a function
The stack trace is:
vue.esm.js?a026:1897 TypeError: Cannot call a class as a function
at b (index.js?dd7f:12)
at t (index.js?dd7f:12)
at resolveAsyncComponent (vue.esm.js?a026:3695)
at createComponent (vue.esm.js?a026:3209)
at _createElement (vue.esm.js?a026:3431)
at createElement (vue.esm.js?a026:3362)
at vm._c (vue.esm.js?a026:3500)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3bf25218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/ProdList.vue?vue&type=template&id=0a25844f& (0.js:69), <anonymous>:242:11)
at VueComponent.Vue._render (vue.esm.js?a026:3557)
at VueComponent.updateComponent (vue.esm.js?a026:4064)
Based on the official (broken) Vue example (https://hodgef.com/simple-keyboard/editor/?d=hodgef/vue-simple-keyboard/tree/master), my implementation looks as follows (reduced example):
<template>
<div>
<CModal id="on-screen-keyboard"
:show.sync="showOnScreenKeyboard">
<Keyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input" />
</CModal>
</div>
</template>
<script>
import Keyboard from 'simple-keyboard';
export default {
components: {Keyboard},
data() {
input: ''
}
methods: {
onChange(input) {
this.input = input;
},
onKeyPress(button) {
console.log("button", button);
},
onInputChange(input) {
this.input = input.target.value;
},
}
}
</script>
Any idea, why this doesn't work?
Upvotes: 0
Views: 899