如何等待用户使用 v-model 输入 vue 输入答案

【问题标题】：How to wait for user enter in vue input with v-model如何等待用户使用 v-model 输入 vue 输入
【发布时间】：2019-06-03 19:15:10
【问题描述】：

代码：

<input type = "number" min="10" max="90" value="50" v-model="preview_width"/>

我的网站根据“preview_width 值”更改 2 个组件的宽度。当我更改输入值时，网站会移动并且不会让用户以友好的方式输入正确的值。我的问题是：如何在用户按下“Enter”后或在他停止定位此输入后编辑“preview_value”？

【问题讨论】：

标签： vue.js

【解决方案1】：

v-model 有一个.lazy 修饰符，它将在更改事件后同步数据：

<input type = "number" min="10" max="90" value="50" v-model.lazy="preview_width"/>

您可以在此处阅读文档：https://vuejs.org/v2/guide/forms.html#lazy

【讨论】：

【解决方案2】：

您可以使用lodash debounce方法，这将延迟触发更新宽度的方法。

<input v-on:input="onChangePreviewWidth">
...
methods: {
  onChangePreviewWidth: _.debounce(function (e) {
    this.preview_width = e.target.value;
  }, 500)
}
...

【讨论】：

【解决方案3】：

您可以使用lazy 仅在更改时更新v-model。

<input type = "number" min="10" max="90" value="50" v-model.lazy="preview_width"/>

或

<input type = "number" min="10" max="90" value="50" v-model="preview_width" lazy/>

这里是文档：https://v1.vuejs.org/guide/forms.html#lazy

【讨论】：