Question

代码：

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

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

Answer 1

您只能使用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

Answer 2

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

Answer 3

您可以使用lodash防反跳方法，这会延迟触发该方法以更新宽度。

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

如何等待用户使用v模型输入vue输入

3 个答案: