Vue.js: V-Model input is not updating when using JSvirtual keyboard

Question

I am using JSkeyboard for one of my webpage and using the v-model to dynamically updating the text based on the input value. when I try with the physical keyboard all seems working fine. with the JS-on screen keyboard the value is not updating. The example code snippet below. the code snippet is just an example that I am trying to achieve. if the question answered somewhere else let me know I will remove it.

new Vue({
  el: '#app',
  data: { message: '' }
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input id="input" v-model="message"/>
  
  <button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">A</button>
    <button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">B</button>
    <button onclick="document.getElementById('input').value+=this.innerHTML;document.getElementById('input').focus()">C</button>
  <p>
    <strong>Name:</strong> {{ message }}
  </p>
</div>

Decade Moon · Accepted Answer · 2019-12-03 09:59:08Z

2

Modifying the value property of the <input> element directly doesn't fire the input event which is needed for v-model to work.

Also there's no reason to be using onclick if you're using Vue, just use @click instead.

If message is the source of truth, then you should be modifying that instead:

<button @mousedown.prevent @click.prevent="message += 'A'">A</button>

This is overly simplistic but suffices for your example. There are better ways of implementing an onscreen keyboard but I won't go into detail about that.

@mousedown.prevent stops the browser from focusing the button when it is clicked.

answered Dec 3, 2019 at 9:59

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dineshh912 Over a year ago

It's worked, thanks for your help, Is there any resource i can refer for implementing onscreen keyboard in a proper way? i tried many js plugins, in the end, updating the value in the message is not working all the time.

Collectives™ on Stack Overflow

Vue.js: V-Model input is not updating when using JSvirtual keyboard

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related