Vue.js：使用 JS 虚拟键盘时 V-Model 输入未更新

Question

我正在为我的一个网页使用 JSkeyboard，并使用 v-model 根据输入值动态更新文本。当我尝试使用物理键盘时，一切似乎都正常。使用 JS-on 屏幕键盘，该值不会更新。下面的示例代码 sn -p。代码 sn-p 只是我想要实现的一个例子。如果问题在其他地方得到回答，请告诉我我会删除它。

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>

Answer 1

直接修改<input>元素的value属性不会触发v-model工作所需的input事件。

如果您使用 Vue，也没有理由使用 onclick，只需使用 @click。

如果message 是事实的来源，那么您应该修改它：

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

这过于简单，但足以作为您的示例。有更好的方法来实现屏幕键盘，但我不会详细介绍。

@mousedown.prevent 阻止浏览器在单击按钮时聚焦。