vue-touch-keyboard

vue-touch-keyboard copied to clipboard

I have set the options.useKbEvents to true and I hoped that this will trigger an update of the data property I used in v-model with the input field. I see that the keypress event is dispatched but the data property doesn't update. Do you know why? Is there a workaround to achieve an automatic update of the data property?

Thanks for your help!

My solution was to create a :change trigger, and in that trigger, tell the input to fire an input event:

  this.$refs.keyboard.input.dispatchEvent(new Event('input', { bubbles: true }));

v-model not work with this keyboard

the solution proposed by @nicksahler just works - thank you! i am using it like this (not with $refs):

<vue-touch-keyboard v-if="keyboard.visible" :layout="keyboard.layout" :input="keyboard.input" :change="manualDispatch"/>

methods: {
  manualDispatch () {
    this.keyboard.input.dispatchEvent(new Event('input', { bubbles: true }));
  }
}

Another example with different var names using @nicksahler solution and working

<vue-touch-keyboard v-if="kbVisible"
                          :layout="kbLayout"
                          :cancel="kbHide"
                          :accept="kbAccept"
                          :input="kbInput"
                          :change="manualDispatch"/>

kbShow(e) {
        this.kbInput = e.target;
        this.kbLayout = e.target.dataset.layout;

        if (!this.kbVisible)
          this.kbVisible = true;
      }

 manualDispatch () {
        this.kbInput.dispatchEvent(new Event('input', { bubbles: true }));
      }

thanks

Should someone submit a pull request for this or should this be left for manual implementation? I had to do the same thing, regardless of the useKbEvents value.