André Reichelt
André Reichelt

Reputation: 1631

"TypeError: Cannot call a class as a function" in Vue Simple Keyboard

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

Answers (0)

Related Questions