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/underscore@1.8.3"></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

Answer 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/underscore@1.8.3"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message" v-on:keyup="updateLen">Length: <span>{{ messageLen }}</span>

</div>

Answer 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/underscore@1.8.3"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message" v-on:blur="updatateLen">Length: <span>{{ messageLen }}</span>

</div>