8

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:

enter image description here

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

enter image description here

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

enter image description here

  1. Add one character:

enter image description here

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
Community
  • 1
  • 1
WoJ
  • 27,165
  • 48
  • 180
  • 345

2 Answers2

19

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>
haffla
  • 1,056
  • 8
  • 15
3

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>
tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • But this doesn't use `_.debounce` and only applies the function on blur. – haffla Dec 20 '16 at 10:07
  • @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. – Saurabh Dec 20 '16 at 10:10
  • yes I see. Interesting. But the question was if underscore is compatible with Vue which it is of course. – haffla Dec 20 '16 at 10:15
  • "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. – Linus Borg Dec 20 '16 at 13:04
  • @LinusBorg Its true for both but computed caches results, while methods will be executed every time this is called or vue variable changes.. – Saurabh Dec 20 '16 at 13:15
  • 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 – Linus Borg Dec 20 '16 at 13:21