Debounce and dynamic input v-model how to make friends?

Question

Vue.js

Tell me how to make friends with dynamic v-model and debounce , I want to make an input delay, xs how to implement it correctly!

Delayed output of changed field value - here is the jsfiddle sandbox

Answer 1

I want to delay input

Well, then follow the input:

methods: {
  onInput: debounce(function(val) {
    this.debouncedInput = val;
  }, 500),
  ...

<v-text-field
  @input="onInput"
  ...

If, in fact, you need to monitor not only what the user enters directly into the input, but changes in general, then you make a calculated property that represents an array of values ​​​​of interest to you, hang an observer on it that looks for the changed value:

computed: {
  count() {
    return this.orders.map(n => n.count);
  },
},
watch: {
  count: debounce(function(newVal, oldVal) {
    this.debouncedInput = newVal.find((n, i) => n !== oldVal[i]);
  }, 500),
},