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:
b
) added, and no activity -- the length is updated (but wrongly, see below) 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:
lodash
and underscore
, with the same results (for both debounce
and throttle
functions).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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.