CODEWITHSUNDEEP
vue.js
Dolidod Teethtard
Dolidod Teethtard

Reputation: 623

How to wait for user enter in vue input with v-model

Code:

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

My website changes width of 2 components depending on "preview_width value". When I change value in input, website moves and doesn't let user enter correct value in friendly way. And my question is: How to edit "preview_value" AFTER user press "Enter", or after he stop targeting this input?

Upvotes: 3

Views: 6209

Answers (3)

Kris D. J.
Kris D. J.

Reputation: 72

v-model has a .lazy modifier, which will sync the data after change events:

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

You can read the documentation here: https://v2.vuejs.org/v2/guide/forms.html#lazy

Upvotes: 5

Mitro
Mitro

Reputation: 278

You can use lodash debounce method, which will delay triggering of the method to update width.

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

Upvotes: 1

BTL
BTL

Reputation: 4656

You could use lazy to update the v-model only on change.

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

or

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

Here is the doc: https://v1.vuejs.org/guide/forms.html#lazy

Upvotes: 2

Related Questions