Question

我正在对其中一个网页使用JSkeyboard，并使用v模型根据输入值动态更新文本。当我尝试使用物理键盘时，一切似乎都正常。使用JS-on屏幕键盘时，该值未更新。下面的示例代码段。该代码段只是我尝试实现的一个示例。如果问题在其他地方回答了，请让我知道我将其删除。

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

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

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

如果message是真理的源头，那么您应该修改它：

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

这过于简单，但足以满足您的示例要求。有更好的方法来实现屏幕键盘，但我不会对此进行详细介绍。

@mousedown.prevent阻止浏览器在单击按钮时集中显示按钮。

Vue.js：使用JS虚拟键盘时，V模型输入未更新

1 个答案: