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

Question

Following the answer to my debouncing question , I wonder vue.js and lodash/ are underscorecompatible for this feature. Response code

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>

Run codeHide result

really executed when performing my function, when there is continuous input, but when it is finally executed after some inactivity, the input for function()seems to be wrong.

Practical example after running the code above:

• quick sequence of characters, then no action:

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

3. Erase all characters with Backspace in quick succession:

4. Add one character:

, , message.

, _.debounce vue.js data <input>?

:

• lodash, underscore ( debounce throttle).
• JSFiddle , SO

Answer 1

@saurabh.

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>

Hide result

Answer 2

, Vue methods , vue, , , vue varaibles, .

, , .

, , mehtod on blur, , , :

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>

Hide result