Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useKbEvents doesn't trigger v-model update #10

Open
SteveJay7 opened this issue Jul 21, 2017 · 5 comments
Open

useKbEvents doesn't trigger v-model update #10

SteveJay7 opened this issue Jul 21, 2017 · 5 comments

Comments

@SteveJay7
Copy link

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!

@nicksahler
Copy link

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 }));

@FedorovP777
Copy link

v-model not work with this keyboard

@mfandl
Copy link

mfandl commented Sep 29, 2017

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 }));
  }
}

@jonezineworks
Copy link

jonezineworks commented Mar 15, 2018

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

@adrum
Copy link

adrum commented Jun 8, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants