Are Vue.js and debounce (lodash/underscore) compatible?

Question

Following an answer to my question on debouncing I am wondering if vue.js and lodash/underscore are compatible for this functionality. The code in the answer

var app = new Vue({
  el: '#root',
  data: {
    message: ''
  },
  methods: {
    len: _.debounce(
      function() {
        return this.message.length
      }, 
      150 // time
    )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message">Length: <span>{{ len() }}</span>
</div>

indeed holds on the execution of my function when there is continuous input, but when it is finally executed after some inactivity, the input for function() seems to be wrong.

A practical example after starting the code above:

1. quick sequence of characters, then no activity:

2. One extra character (b) added, and no activity -- the length is updated (but wrongly, see below)

3. Erase all the characters with Backspace in a quick sequence:

4. Add one character:

It looks like the function is ran on the last but one value of message.

Could it be that _.debounce handles the vue.js data before it is actually updated with the <input> value?

Notes:

• tested with both lodash and underscore, with the same results (for both debounceand throttle functions).
• I also tested it on JSFiddle in case there would be some interference with the SO snippet

Solution 1

Here's an improved version of @saurabh's version.

var app = new Vue({
  el: '#root',
  data: {
    message: '',
    messageLen: 0
  },
  methods: {
    updateLen: _.debounce(
      function() {
        this.messageLen = this.message.length
      }, 300)        
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message" v-on:keyup="updateLen">Length: <span>{{ messageLen }}</span>

</div>

Solution 2

Why this is happening is because Vue invokes methods only when vue variables used in the methods changes, if there are no changes in the vue varaibles, it will not trigger those methods.

In this case as well, once we stop typing, it will continue to show last called method's output and will only show again once you enter the input again.

One alternate approach if you dont want to call an function on all inputs, you can call a mehtod on blur event, so method will be invoked only when focus goes out of input field, like following:

var app = new Vue({
  el: '#root',
  data: {
    message: '',
    messageLen: 0
  },
  methods: {
    updatateLen:
      function() {
        this.messageLen = this.message.length
      }        
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message" v-on:blur="updatateLen">Length: <span>{{ messageLen }}</span>

</div>

Comments

[haffla]

But this doesn't use _.debounce and only applies the function on blur.

[Saurabh]

@haffla Yes, thats why I called it alternate approach, but this does not call the function on every key stroke, but only when it goes out of focus.

[haffla]

yes I see. Interesting. But the question was if underscore is compatible with Vue which it is of course.

[Linus Borg]

"Why this is happening is because Vue invokes methods only when vue variables used in the methods changes" --> This is not correct. What you describe are computed properties.

[Saurabh]

@LinusBorg Its true for both but computed caches results, while methods will be executed every time this is called or vue variable changes..

[Linus Borg]

You are on the right track, but the point is something different: the method is being called, also after the last change(+wait time) - but since it does not change any data, the view is not updated. That's why @haffla's reply works, and OPs doesn't